Power Platform Community Forum Thread Details

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->

Categories:

Power Apps portals

Quick Links