The Breadcrumb block shows the path from the home page to the page being read. This page describes the path it shows, its separator and label settings, how to style its steps, and how it behaves with a screen reader.
Add the block
Insert the Breadcrumb block (Add a block). Its usual place is the template of a content type, above the heading: it then shows the path of the content the template displays (Decide the look with templates). The site calculates the path from the hierarchy of your pages.
The breadcrumb is a row, laid out in its Flex layout panel. It contains two blocks, the step and the separator, which you style once for the whole path.
The path shown
- On a page or a content item, the breadcrumb shows the home page, each parent page, then the content being read. The home step carries the name of your site, unless you give it a label.
- When a content type has a list page, that list is part of the path, named like the type: “Atelier Sauge › Articles › My article”. On the list itself, the breadcrumb shows “Atelier Sauge › Articles”.
- On a site in several languages, the list step leads to the list in the language of the page being read.
- The breadcrumb shows nothing on the home page, on a search results page, or when the path has only one step. A page with no title or label takes no place in the path.
Set the separator
Select the Breadcrumb block, Settings tab, Separator panel.
| Setting | Effect | Default value |
|---|---|---|
| Use an icon as separator | Replaces the character with an icon, chosen in Separator icon. As long as no icon is chosen, the character stays displayed. | Off |
| Separator | The character between two steps: plain text, a character or a little HTML. The Quick separator pick row offers eleven characters in one click, from › to •. | › |
| Separator icon | The icon between two steps, chosen in the icon picker (Icon). With Use an icon as separator. | None |
Set the steps
The Items & labels panel sets what the breadcrumb shows.
| Setting | Effect | Default value |
|---|---|---|
| List the homepage | Turned off, the home step disappears from the breadcrumb. | On |
| One field per step | The label of the step in the breadcrumb. Empty, the step keeps the page title. The “(home)” and “(current)” mentions mark the home page and the page being read. | Empty |
The labels you write go into the breadcrumb that Google reads in your pages. Those of the block placed in the page count first. For the steps it does not rewrite, they are those of the block in its template, in the home page’s and in the list’s.
In a template, the breadcrumb shows an example path: the home page, the type’s list when it has one, then the page. It lets you style the breadcrumb without a real page. On the site, the breadcrumb shows the real hierarchy.
Style the breadcrumb
| Block | Role | States |
|---|---|---|
| Breadcrumb | The whole path. | Default, Hover |
| Breadcrumb step | One step. Each page of the path is shown with it, the page being read in its Active state. | Default, Hover, Focus, Active |
| Breadcrumb separator | The mark between two steps, repeated between each page. Its character is set on the breadcrumb, its look on this block. | Default |
In the editor, the first step and the separator that follows it are these two blocks. The others are copies of them: clicking one selects the block it copies. You can neither remove nor add a block in the breadcrumb.
A step carries the saved style Breadcrumb step: your main color, your secondary color and an underline on hover and focus. The page being read takes the color of the text around the breadcrumb, with no underline. The separator carries the style Breadcrumb separator, a muted shade of the text. The step has no link color in its Colors panel: it is a link itself.
The Breadcrumb part of the design catalog gives a look to every breadcrumb of the site: Simple, Underlined, Discreet or Pills (Adopt a design from the catalog).
On a phone
The breadcrumb is a row. For a long path to wrap onto a new line instead of overflowing, turn on Wrap in its Flex layout panel (Container). This setting is made screen by screen.
Accessibility
- The breadcrumb is announced as a navigation region named Breadcrumb. The Region name field, at the top of the Settings tab, replaces this name. Empty, the breadcrumb keeps its own, shown grayed out in the field.
- The page being read is not a link: it is displayed as text and a screen reader announces it as the current page.
- Separators are hidden from screen readers, which read only the steps.