Dynamic breadcrumbs for nested pages

Implementing dynamic breadcrumbs in Power Pages (formerly Power Apps Portals) improves navigation, especially for websites with nested pages or a deep hierarchy. Breadcrumbs help users understand where they are and easily return to previous levels.

This guide explains how to create dynamic, data-driven breadcrumbs using Liquid templates in Power Pages.

Overview

Power Pages stores all web pages in the Dataverse Web Page table, where each page can have a Parent Page. This naturally forms a hierarchy that can be used to render breadcrumbs dynamically.

The goal is to create a reusable Liquid snippet that:

Traverses the page hierarchy from the current page to the root
Builds links for each level
Renders a breadcrumb trail on the page

Step-by-Step Implementation

Step 1: Understand Page Hierarchy

Every Web Page has these key fields:

Name – Display name of the page
Partial URL – URL slug for the page
Parent Page – Lookup to the parent (if nested)
Website – Associated website record

Breadcrumbs are built by recursively tracing the Parent Page from the current page back to the root.

Step 2: Create a Web Template

Go to Portal Management App > Web Templates
Create a new Web Template with the following name:

Name: Breadcrumb Generator
Source (Liquid Code):

{% assign breadcrumbs = '' %}
{% assign currentPage = webpage %}

{% assign pages = currentPage | entity_view: 'parent_pageid' %}

{% assign pageTrail = '' %}
{% assign loopPage = currentPage %}

{% assign trail = '' %}

{% while loopPage != empty %}
  {% capture breadcrumb %}
    <li class="breadcrumb-item">
      <a href="{{ loopPage.url }}">{{ loopPage.name }}</a>
    </li>
  {% endcapture %}
  {% assign trail = breadcrumb | append: trail %}
  {% assign loopPage = loopPage['parent_pageid'] %}
{% endwhile %}

<ul class="breadcrumb">
  {{ trail }}
</ul>

Step 3: Create a Content Snippet to Reuse the Breadcrumb

Create a Web Template or Content Snippet to include this breadcrumb on all pages.

Example snippet:

{% include 'Breadcrumb Generator' %}

Place this snippet in the Header or a specific section of your layout page or web template.

Step 4: Add the Snippet to Your Page Layout

To make it visible across all pages:

Go to Web Templates
Edit the main layout template (e.g., Header, Layout 1 Column)
Insert the include tag inside the layout file:

<div class="container mt-3">
  {% include 'Breadcrumb Generator' %}
</div>

Step 5: Style the Breadcrumb

Use CSS for breadcrumb styling. Add the following to your site’s CSS:

.breadcrumb {
  padding: 8px 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
  list-style: none;
  display: flex;
  gap: 5px;
}
.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
}
.breadcrumb-item::after {
  content: "›";
  margin: 0 5px;
  color: #6c757d;
}
.breadcrumb-item:last-child::after {
  content: "";
}

Features of This Implementation

Works with any page depth (recursive traversal)
Renders links to each parent level
Dynamic for each page, no manual updates required
Clean, semantic HTML and easily stylable

Considerations

Concern	Recommendation
Performance	Test on large page trees; Liquid is processed server-side
Multilingual sites	Adjust to show breadcrumb in current language
Accessibility	Use `aria-label="breadcrumb"` on `<ul>` for screen readers
Custom text	Modify name rendering if you need different display names

Optional Enhancements

Highlight current page (non-link for the last breadcrumb item)
Add icons for Home or other navigation cues
Show breadcrumbs conditionally (hide on home page or login page)
Log breadcrumbs in telemetry for usage tracking