Breadcrumbs Element
The Breadcrumbs Element shows the path from the home page to the page the visitor is on, for example Home, Products, Pumps. Each step is a link, so visitors always see where they are and can go back up with one click.
The path is built automatically from the page hierarchy, the post categories or terms and the post type archives. That makes the element a good fit for a header, a page title area or a Layout Builder section that is reused on many pages.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Breadcrumbs Element
Add the Breadcrumbs Element where the path should appear. On the General tab you can put a Prefix in front of the path, such as “You are here:”, change the Homepage Anchor Text or replace it with a Homepage Anchor Icon, and choose a Separator text or Separator Icon between the steps.
Show Post Categories/Terms, Show Post Type Archives and Show Post Name decide which steps appear. Turn off Show Post Name when the page title is already shown right next to the breadcrumbs.
On the Design tab set the Alignment, Font Size and the colors of the text, prefix, current page and separator. Everything left on Default or empty follows the Breadcrumbs section in Global Options, which also controls the breadcrumbs in the page title bar, so both look the same.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
General
| Heading | Description |
|---|---|
| Prefix | Controls the text before the breadcrumb menu. |
| Homepage Anchor Text | Controls the text anchor of the Homepage link. |
| Homepage Anchor Icon | Controls the icon to replace the text in the anchor of the Homepage link. Click an icon to select, click again to deselect. |
| Separator | Controls the separator between each breadcrumb. |
| Separator Icon | Controls the icon to be used as separator, which will replace the separator text. Click an icon to select, click again to deselect. |
| Show Post Categories/Terms | Turn on to display the post categories/terms in the breadcrumbs path. |
| Show Post Type Archives | Turn on to display post type archives in the breadcrumbs path. |
| Show Post Name | Turn on to display the post name in the breadcrumbs path. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Alignment | Select the beadcrumbs alignment. |
| Font Size | Controls the font size for the breadcrumbs text. Enter value including CSS unit (px, em, rem), for example 10px. |
| Text Color | Controls the text color of the breadcrumbs font. |
| Prefix Color | Controls the text color of the breadcrumbs prefix. |
| Current Page Color | Controls the text color of the current page in the breadcrumbs path. |
| Separator Color | Controls the text color of the breadcrumbs separator. |
| Margin | In pixels or percentage, for example 10px or 10%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- The breadcrumbs are output as a navigation landmark labelled “Breadcrumb”, which helps screen reader users find them.
- When rich snippets are turned on in Global Options, the path is also added to the page as structured data, which search engines can show in their results.
- Use the element once per page. Two breadcrumb paths on the same page confuse visitors and add the same structured data twice.
- If an SEO plugin with its own breadcrumbs is active, its breadcrumbs replace the Tirenoa output, and some options here may not apply.
- A Separator Icon replaces the Separator text, and a Homepage Anchor Icon replaces the Homepage Anchor Text.