Power Community

Power Community

Power Apps Portal – Create Left Navigation Menu



Hey everyone,, Hope you are doing well and staying safe!

In this #PowerGuideTip, I am going to share a Tip to customize portal default toolbar menu. As you know that currently portal toolbar menu (weblinks) has two major UI limitations:

  • By default portal menu/toolbar can only be appeared on the header.
  • Only display navigation menu up to 1 level. As depicted in pic below, you can see child links of only Power Guide Tips, not the child links of Power Platform and Dynamics 365.

Business Requirement

Customizing portal UI is one of the most common business requirement, where your client wants to customize the portal UI (Login, Registration, Home and Toolbar menu) to match the portal UI with other existing applications & websites. Recently, I have came across a UI requirement, where I had to show the navigation menu in left panel instead of showing it on top.


I am going to share a code snippet which is based on JavaScript, HTML, CSS and Liquid Code. Where,

  • HTML + CSS – is being used to design the custom toolbar menu
  • JavaScript – is being used to write some client side validations & logics.
  • Liquid Code – Dynamically fetching the portal weblinks from web link set table.

Alright, let’s get into more details and implement the requirement by performing followings steps:

Note: I have created following Web Links under Primary Navigation Web Link Set.

Step 2 – Open ‘Mobile Header’ content snippet (Portal Management > Content Snippets) and paste the following code

Power Guide

× {% assign primary_nav = weblinks["Primary Navigation"] %} {% if primary_nav %} {% for parentLink in primary_nav.weblinks %} {{ parentLink.name | escape }} {% assign sublinks_L1 = parentLink.weblinks %} {% for sublink_L1 in sublinks_L1 %} {% if sublink_L1 %} {% endif %} {% assign sublinks_L2 = sublink_L1.weblinks %} {% for sublink_L2 in sublinks_L2 %} {% if sublink_L2 %} {% endif %} {% endfor %} {% endfor %} {% endfor %} {% endif %}
  • Update the Line 2 (portal logo & company name ) as per your business requirement. This line of code will already be presented in your content snippet.
  • Update the CSS (Line 4 – 57) as per your UI guidelines.
  • Line 63 – change the web link set name that you want to customize. I have used ‘Primary Navigation’ for the demonstration, however this might be different in your case. For ex: Default, Secondary Navigation, Profile Navigation etc.
  • Lines (63 – 84) – Liquid code is used to fetch the weblinks under ‘Primary Navigation’ and also fetching the sublinks (childlinks) of each weblink. In the given code, I have fetched the sublinks only till second depth. As depicted in the pic below: D1 represents Depth 1 child links and D2 represents Depth 2 childlinks (child links of a child link) .
Step 3 – Hide portal default toolbar menu from Header template

Open Header web template and add style=”display:none;” at following places.


  • Important Tip: You can create a new content snippet to write your code (i shared above) and include that in your Mobile Header content snippet.

Thank you for reading this article and hope you found it useful and valuable. Please share your feedback and hit subscribe to learn such more useful #PowerGuideTips. Stay tuned!


This post was originally published on this site

- Advertisement -spot_img


Please enter your comment!
Please enter your name here

- Advertisement - Advertisement

Latest News

Create analytical presentations with Integrated Maps within Microsoft Dynamics 365!

30Sep September 30, 2023 General “Okay Jen, calm down, take a deep breath, and look at me. I am here to help...

More Articles Like This

- Advertisement -spot_img