> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.maglr.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Breadcrumb / Sitemap

### **What is a breadcrumb or sitemap?**
The **breadcrumb** or **sitemap** component shows a navigation trail: the path from the top-level page down to the page the reader is viewing. Each step matches pages in your publication’s **hierarchical structure** (main pages and subpages) and can be clicked to navigate to that page.
### **When to use a breadcrumb?**
The component is most useful when your publication has **several levels** (pages with subpages). If the reader is on a page at the "root" level, the trail will be short.
### **What do readers get from it?**
* **Orientation** – Visitors see at a glance where they are in the publication, especially when you use multiple levels of subpages.
* **Quick way back** – Earlier steps in the trail are clickable and take readers to a parent page without hunting through the main navigation.
* **A familiar pattern** – Breadcrumbs are a common web convention, which makes nested content easier to explore.
### **How to use the breadcrumb / sitemap component**
The breadcrumb is built **automatically** from your page structure and you do not configure the path by hand.
1. **Add the component**
In the editor, drag the **breadcrumb / sitemap** component on to the canvas where you want it to appear. Take into account extra space if you have many nested pages.
2. **Styling**
Use the style options to adjust, among other things:
* **Container** – background, border, corner radius, padding
* **Item** – typography for clickable earlier steps
* **Active item** – typography for the current page (last step, not clickable)
* **Separator** – the character or styling between steps
3. **Separator**
By default there is a **text separator** (e.g. `›`), though it can be altered to any character or left empty.
Optionally you can upload an **SVG icon** to use as the separator instead of text.
4. **Spacing**
Use **Gap** to set the space between breadcrumb segments.
5. **Published output**
The real breadcrumb appears **in the published publication**. In the editor and editor preview you typically see a **placeholder** (e.g. “Page › Subpage”), as noted in the component settings. That is expected.