How to Add and Customize Breadcrumbs in Microsoft Power Pages
Add Breadcrumbs in Microsoft Power Pages
Breadcrumbs provide users with a clear navigation path by displaying the hierarchy of pages from the homepage to the current page. They improve usability, help visitors understand their location within the website, and make navigation easier.
Tip: Breadcrumbs improve user experience and help visitors quickly navigate back to parent pages without using the browser's back button.What are Breadcrumbs?
Breadcrumbs are navigation links that display the path from the homepage to the current page. They help users understand the structure of your website and improve navigation across multiple levels of content.
Add a Breadcrumb Component
- Open Power Pages Design Studio.
- Select the page where you want to add breadcrumbs.
- Choose the section where the breadcrumb component should appear.
- Hover over an editable area on the canvas.
- Select the Breadcrumb component from the component panel.
- Save and publish your changes.
Edit a Breadcrumb Component
After adding a breadcrumb component, select it to open the properties panel where you can customize its appearance and behavior.
Breadcrumb Properties
| Property | Description |
|---|---|
| Separator | Choose the symbol displayed between breadcrumb links. |
| Home Display | Show the home page as text, icon, both, or hide it completely. |
| Font Style | Customize the appearance of breadcrumb text. |
Customize Breadcrumbs
Power Pages uses the Pages Breadcrumb web template to generate breadcrumb navigation. Customizing this template allows you to change the appearance and behavior of breadcrumbs across your entire website.
Important: Changes made to the Pages Breadcrumb web template affect all breadcrumb components across the website.Restore the Default Breadcrumb Template
If you need to restore the original breadcrumb functionality:
- Open the Portal Management app.
- Locate the Pages Breadcrumb web template.
- Rename the customized template.
- Add a new Breadcrumb component in Design Studio.
- Power Pages automatically recreates the default template.
Benefits of Breadcrumb Navigation
- Improves website navigation.
- Helps users understand page hierarchy.
- Reduces navigation confusion.
- Enhances user experience.
- Provides quick access to parent pages.
- Supports SEO-friendly website structure.
Best Practices
- Keep breadcrumb paths simple and clear.
- Use meaningful page names.
- Display the homepage link when possible.
- Maintain consistent breadcrumb styling.
- Test navigation across different devices.
- Avoid excessive page hierarchy levels.
Summary
Breadcrumbs are an essential navigation feature in Microsoft Power Pages that improve usability, provide contextual navigation, and help users quickly move through your website hierarchy. By customizing breadcrumb settings and templates, you can create a more intuitive browsing experience.