Dynamic breadcrumbs based on user path

Creating dynamic breadcrumbs based on the user’s navigation path is a powerful feature for enhancing user experience on websites, especially when dealing with portals or multi-page applications. In a scenario like Power Pages (formerly Power Apps Portals) or Power Apps, dynamic breadcrumbs can be constructed to reflect the user’s path through the site, providing them with a clear indication of where they are within the structure of the portal.

In this guide, we’ll walk through how to implement dynamic breadcrumbs based on the user’s navigation path.

What Are Dynamic Breadcrumbs?

Breadcrumbs are a navigation aid showing users their location in a website or portal. They display the trail from the homepage or main section to the current page the user is on. Dynamic breadcrumbs, however, adjust their content based on the user’s activity, allowing the trail to adapt as the user navigates through different sections or pages.

For example, if a user visits:

Home > Products > Electronics > Laptops

Dynamic breadcrumbs would be based on the specific pages visited.

Steps to Create Dynamic Breadcrumbs

Step 1: Plan Your Breadcrumb Structure

Before implementing dynamic breadcrumbs, you need to plan the structure. Typically, breadcrumbs include:

Home Page (always present).
Category or Section (representing major divisions of content).
Subcategory or Page (more specific pages or items).
Current Page (the page the user is currently on).

For a Power Pages site, you may want to track the sections (or entities) the user visits, such as Home, Products, Product Categories, and Individual Product Pages.

Step 2: Define Your Data Structure

In Power Pages, breadcrumbs will likely be built from pages or Dataverse entities. The data structure may vary based on what you’re tracking. For example:

Home: The main page.
Category Pages: Pages corresponding to product categories (stored as entities in Dataverse).
Subcategory Pages: Specific product types.
Item Pages: Individual items or pages corresponding to an entity like a Product or Service.

The key here is to dynamically fetch this data based on the user’s current path.

Step 3: Implementing the Breadcrumbs in Power Pages

In Power Pages, you can add dynamic breadcrumbs by using Liquid templating, which allows for conditional content rendering based on the page or URL the user is viewing. You can also use JavaScript for more interactive and user-specific breadcrumbs.

3.1 Using Liquid for Dynamic Breadcrumbs

You can use Liquid in Power Pages to check the current page and create breadcrumbs dynamically. Here’s an example of how you might structure the Liquid code for breadcrumbs:

{% assign breadcrumb = "" %}
{% assign currentPage = request.path | split: '/' %}
{% assign breadcrumbCount = currentPage.size %}

{% for i in (0..breadcrumbCount-1) %}
    {% assign breadcrumbLink = currentPage[0..i] | join: '/' %}
    {% if i == breadcrumbCount-1 %}
        {% assign breadcrumb = breadcrumb | append: "<span class='current-page'>" | append: currentPage[i] | append: "</span>" %}
    {% else %}
        {% assign breadcrumb = breadcrumb | append: "<a href='/" | append: breadcrumbLink | append: "'>" | append: currentPage[i] | append: "</a> > " %}
    {% endif %}
{% endfor %}

<div class="breadcrumbs">
    {{ breadcrumb }}
</div>

In this example:

We first split the current URL (request.path) into an array using the / separator.
We then loop through this array, creating a breadcrumb for each path level.
For the last item (the current page), we use a special class (current-page) to style it differently.

3.2 JavaScript Approach for More Interactivity

If you want the breadcrumbs to change dynamically as the user interacts with the portal (without reloading the page), JavaScript can be a more interactive solution.

Here’s an example of using JavaScript to dynamically update the breadcrumbs based on the user’s navigation:

window.addEventListener('popstate', function(event) {
    updateBreadcrumbs();
});

function updateBreadcrumbs() {
    var breadcrumbsContainer = document.getElementById("breadcrumbs");
    var currentPath = window.location.pathname.split('/').filter(function(part) { return part !== ''; });
    var breadcrumbHtml = '<a href="/">Home</a> > ';
    
    currentPath.forEach(function(path, index) {
        var breadcrumbLink = '/' + currentPath.slice(0, index + 1).join('/');
        breadcrumbHtml += `<a href="${breadcrumbLink}">${path}</a>`;
        if (index < currentPath.length - 1) {
            breadcrumbHtml += ' > ';
        }
    });
    
    breadcrumbsContainer.innerHTML = breadcrumbHtml;
}

// Initial call to set the breadcrumbs
updateBreadcrumbs();

In this JavaScript version:

We listen for the popstate event (for back/forward navigation).
We split the current URL into segments and create links for each segment, joining them with >.
We then dynamically update the HTML of the breadcrumbs container (#breadcrumbs).

Step 4: Using URL Parameters for Enhanced Breadcrumbs

In many portals, breadcrumbs may be influenced by URL parameters (e.g., filtering results by category or date). Here’s how you can include them dynamically in your breadcrumbs:

Capture URL Parameters: Use JavaScript to capture query parameters from the URL.
Render Breadcrumbs Based on Filters: Modify the breadcrumb rendering logic to display the parameters as part of the breadcrumb trail.

function getQueryParams() {
    var params = new URLSearchParams(window.location.search);
    var queryParams = '';
    params.forEach(function(value, key) {
        queryParams += ` > <span class="filter">${key}: ${value}</span>`;
    });
    return queryParams;
}

function updateBreadcrumbs() {
    var breadcrumbsContainer = document.getElementById("breadcrumbs");
    var currentPath = window.location.pathname.split('/').filter(function(part) { return part !== ''; });
    var breadcrumbHtml = '<a href="/">Home</a> ';
    
    currentPath.forEach(function(path, index) {
        var breadcrumbLink = '/' + currentPath.slice(0, index + 1).join('/');
        breadcrumbHtml += `> <a href="${breadcrumbLink}">${path}</a>`;
    });

    breadcrumbHtml += getQueryParams();
    
    breadcrumbsContainer.innerHTML = breadcrumbHtml;
}

updateBreadcrumbs();

Step 5: Styling and Enhancements

Once you have the dynamic breadcrumbs, you’ll want to make them visually appealing and accessible. Consider the following styling tips:

Separation with “>”: This helps users easily distinguish between different levels in the hierarchy.
Active State: Style the current breadcrumb differently, such as using bold or a different color.
Mobile-Friendly: Ensure breadcrumbs are responsive and work well on smaller screens.

.breadcrumbs {
    font-size: 16px;
    font-family: Arial, sans-serif;
}

.breadcrumbs a {
    text-decoration: none;
    color: #0078d4;
}

.breadcrumbs .current-page {
    font-weight: bold;
    color: #333;
}

.breadcrumbs .filter {
    font-style: italic;
    color: #555;
}

Step 6: Test the Implementation

After implementing the breadcrumbs:

Test Navigation: Click through various pages and check that the breadcrumb trail updates correctly.
Test Back and Forward Navigation: Ensure that breadcrumbs work when the user navigates back and forth.
Test on Different Devices: Make sure breadcrumbs display well on mobile and desktop.