cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
MartinVargas
Frequent Visitor

How to highlight the current section - Power Apps Menu

When navigating the menu bar, the option the user is in is not highlighted. I have tried to do it with JQuery but my attempts are in vain.

In summary, what I am looking for is that if the user clicks on the Home page it will be marked with a color and if they click on About Us the previous selection will be unchecked and this will be marked with the color.

I tried using the condition `{% if request.path ==" / "%} class =" weblink active mr-3 "{% else%} class =" weblink mr-3 "{% endif%}` in the "Option 1 "but it didn't work. What am I doing wrong?

 

{% if user %}
    <!--Option 1-->
    
    <li role="none" {% if request.path=="/"%}class="weblink active mr-3" {% else %} class="weblink mr-3"{% endif %}
        <a role="menuitem" aria-label=Home page" href="/" title="Home page" >
            
            Home page
        </a>
        
    </li>
        
    <!--Option 2-->
    
    <li role="none" class="weblink dropdown"
        <a role="menuitem" aria-label="Services" href="#" class="dropdown-toggle" data-toggle="dropdown" title="Services" >
            
            Services
            <span class="caret"></span>
        </a>
        
        <ul class="dropdown-menu" role="menu">
            
            <li role="none">
                <a role="menuitem" aria-label="Services" href="/services/"   title="Services" >Services</a>
            </li>
            <div class="divider"></div>
            
            
            <li role="none">
                <a role="menuitem" aria-label="Product A (example)" href="/services/product-a/"   title="Product A (example)" >
                    Product A (example)
                </a>
            </li>
            
            <li role="none">
                <a role="menuitem" aria-label="Product B (example)" href="/services/product-b/"   title="Product B (example)" >
                    Product B (example)
                </a>
            </li>
            
        </ul>
        
    </li>
            
    <!--Option 3-->
    
    <li role="none" class="weblink"
        <a role="menuitem" aria-label="About us" href="/about-us/" title="About us" >
            
            About us
        </a>
        
    </li>
            
    {% endif %}
                    
    <!--End Options->
0 REPLIES 0

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Welcome Super Users.jpg

Super User Season 2

Congratulations, the new Super User Season 2 for 2021 has started!

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Users online (1,339)