Articles on: The editor

Breadcrumb / Sitemap

Breadcrumb / Sitemap component


The Breadcrumb / Sitemap component shows a navigation trail on a published page: the path from the top-level page down to the page the reader is viewing. It shows only the path to the current page, not a list of all pages in your publication.


The trail is built automatically from your publication's page structure (main pages and the subpages nested under them). You don't set the path by hand.


  • Each item in the trail is the title of one page on the path.
  • Every item except the last is a link to that page, so readers can go back to a parent page.
  • The last item is the current page and is not a link.
  • On a top-level page, the trail shows a single item: the current page's name, with no links and no separator.


The component is most useful in a publication with several levels of subpages, where it shows readers where they are and gives them a quick way back up.


Adding a breadcrumb


To add a breadcrumb to a page in the editor:


  1. Click Add in the left panel.
  2. In the Add elements drawer, open the Specials category. The component is also listed under All.
  3. Drag Breadcrumb / Sitemap onto the canvas where you want the trail to appear.
  4. Resize the component so it is wide enough for your longest trail. If the trail is wider than the component, the items wrap onto the next line.


Changing the separator


The separator is the character or icon between the items of a breadcrumb trail. By default it is the text character ›. To change it:


  1. Select the breadcrumb on the canvas.
  2. In the Element panel, click Settings in the Breadcrumb / Sitemap block.
  3. Under Separator, type the character or characters you want in Text. To show no separator, clear the field. The default separator has a space on each side of the ›; add spaces around your character if you want the same spacing.
  4. Optional: to use an icon instead of text, click Select .svg icon next to Icon. In the file manager, select an SVG file, or upload one and then select it. When an icon is set, it replaces the text separator. To go back to the text separator, click the trash icon next to the file name.


Adjusting the spacing between items


The Gap setting controls the space between the items of a breadcrumb trail and the separators between them. To change it:


  1. Select the breadcrumb on the canvas.
  2. In the Element panel, click Settings in the Breadcrumb / Sitemap block.
  3. Under Spacing, drag the Gap slider. The range is 0 to 50 pixels.


Styling the breadcrumb


To change how a breadcrumb looks:


  1. Select the breadcrumb on the canvas.
  2. In the Element panel, go to the Styling block.
  3. Click the part you want to style: Container, Item, Active item or Separator.
  4. Adjust the options in the popover that opens.


These four parts are the complete set of breadcrumb style options:


  • Container: the background, border, corner radius and padding of the whole breadcrumb.
  • Item: the typography of the clickable items (the pages above the current page).
  • Active item: the typography of the current page, the last item in the trail.
  • Separator: the font and color of the text separator. The separator character itself is set under Settings, as described in Changing the separator.


The typography options for Item, Active item and Separator don't include line height or letter spacing.


Breadcrumb in the editor and the published page


The real breadcrumb trail appears only in the published publication. In the editor and the editor preview, the Breadcrumb / Sitemap component always shows a placeholder with two items, "Page" and "Subpage", because it has no page data there. The placeholder uses your separator and styling, so you can check both in the editor. With the default separator, it reads "Page › Subpage".


Frequently asked questions


Why does the breadcrumb show "Page › Subpage" in the editor?


In the editor and the editor preview, the Breadcrumb / Sitemap component shows a placeholder with two items, "Page" and "Subpage", because the real trail is built from page data that is only available on the published page. With the default separator, the placeholder reads "Page › Subpage". Publish your publication to see the real trail.


Why does my breadcrumb show only one item?


The breadcrumb trail follows your publication's page structure. On a top-level page, the trail has only one item: the current page's name. The trail shows more items only on a subpage: one item for each page above it, plus the current page as the last item.


Does the breadcrumb list all pages of my publication?


No. Despite the name Breadcrumb / Sitemap, the component shows only the path from the top-level page to the current page. It does not list all pages.


Can I use an icon as the breadcrumb separator?


Yes. Select the breadcrumb, click Settings in the Breadcrumb / Sitemap block of the Element panel, and under Separator click Select .svg icon next to Icon. Select or upload an SVG file in the file manager. When an icon is set, it replaces the text separator.

Updated on: 29/10/2026