In Power Pages, configuring the site map and navigation ensures users can access the right pages easily and intuitively. Navigation is key to providing a structured and user-friendly experience across your portal. Whether you’re building a customer support portal, partner site, or internal knowledge base, having clear and customizable site navigation is essential.
This guide walks you through how to configure and manage site maps, navigation menus, and web link sets, all using the Power Pages Design Studio and the Power Platform admin tools.
1. Understanding Navigation Structure in Power Pages
Power Pages uses the following components for site navigation:
🔹 Web Link Sets
- Think of them as containers for navigation links (like a menu bar or footer).
- Each web link set can have multiple web links.
- Examples: Main Navigation, Footer Links, Support Links
🔹 Web Links
- Individual clickable links within a web link set.
- Can link to:
- Internal pages (within Power Pages)
- External URLs
- Files or custom scripts
🔹 Web Page Hierarchy
- Determines the structure and parent-child relationship between pages.
- This hierarchy influences navigation and breadcrumbs.
2. Accessing Navigation Settings
There are two ways to configure navigation:
a) Using Power Pages Design Studio
- Open Power Pages Design Studio
- Select your site
- Go to Pages
- Use the left navigation panel to organize, add, or remove pages
- Use the Navigation menu tab to manage navigation and menus
b) Using Power Apps Portal Management App
- Go to Power Apps
- Select your Portal Management model-driven app
- Navigate to:
- Web Link Sets: for overall menu containers
- Web Links: to configure individual menu items
3. Step-by-Step: Creating Site Navigation
Step 1: Create or Identify a Web Link Set
- In the Portal Management App:
- Go to Web Link Sets
- Example names: Main Navigation, Footer Menu
- Assign the website (your portal site)
- Set the Name (used for identification)
Step 2: Add Web Links
- Inside the selected web link set:
- Go to Web Links subgrid
- Click + New Web Link
- Provide:
- Name: Menu label
- Page: (if internal link)
- URL: (if external)
- Parent Web Link: (if creating dropdown/submenu)
- Display Order: Number for ordering (lower = higher on menu)
Step 3: Organize Menu Hierarchy
- Use Parent Web Link to nest links and create dropdowns
- Set Display Order to control the sequence of links
4. Configuring Web Page Hierarchy
Each web page can be configured to reflect its place in the overall structure:
- In Design Studio, select the page
- Choose Set Parent Page if it’s a child of another
- This affects:
- Breadcrumbs
- Site Map rendering
- Navigation logic (optional)
5. Displaying Navigation on Your Site
Default Templates
- Most Power Pages templates automatically load navigation via Liquid:
{% include 'Navigation' %}
Custom Layouts
If you build a custom layout, embed navigation manually using Liquid:
{% include 'WebLinkSet' name:'Main Navigation' %}
You can replace 'Main Navigation' with the actual name of your menu.
6. Conditional Visibility for Navigation Items
Use Web Roles to show/hide certain menu items:
- In the Web Link setup:
- Use Web Roles subgrid
- Assign roles like Authenticated Users, Administrators
- This controls access and visibility dynamically
7. Adding Icons and Images to Links (Optional)
You can enhance navigation with icons:
- Add Image URL in Web Link to display an icon next to the label
- Use external icon libraries or hosted SVGs
8. Localization and Multilingual Navigation
If your portal supports multiple languages:
- Each Web Link has localized content support
- Use the Translations tab in each Web Link to define different labels
- The site will display appropriate text based on the user’s language
9. Best Practices for Navigation
- Keep menus clean – don’t overload with links
- Use dropdowns for organizing many subpages
- Limit the number of top-level menu items (5–7 is ideal)
- Use consistent naming
- Validate links regularly (no broken URLs)
10. Troubleshooting Navigation Issues
| Issue | Possible Cause | Fix |
|---|---|---|
| Navigation not visible | Web Link Set not included in layout | Add Liquid tag {% include 'WebLinkSet' %} |
| Menu item not showing | Web Role restrictions | Add correct Web Roles |
| Display order wrong | Incorrect display numbers | Update “Display Order” field |
| Broken link | URL or Page reference incorrect | Correct target in Web Link |