Breadcrumbs
A breadcrumb trail for any page, with structured data for search engines.
On this page
The Breadcrumbs widget shows where the current page sits in your site, such as Home › Design notes › Designing around natural light. It builds the trail by itself for every kind of page, so you place it once in a template and it is right everywhere. It also tells search engines about the trail, so they can show it in results.
Add Breadcrumbs
Open Insert in the left panel and find Breadcrumbs in the Content group, or type "bread" in the search box. Drag it onto the canvas, or click it to add it next to the selected element. See Add elements.
The usual place is the top of your blog post, page and archive templates in the Theme Builder, above the title.
Where the trail comes from
The widget reads the page being viewed and builds the trail from WordPress:
| Page | Trail |
|---|---|
| Blog post | Home › your blog page (if you use a static posts page) › category and its parent categories › post title |
| Page | Home › parent pages › page title |
| Custom post type item | Home › the post type archive (if it has one) › parent items › item title |
| Category, tag or other term | Home › parent terms › term name |
| Author, date and post type archives | Home › the archive name |
| Search results | Home › Search results for "…" |
| 404 page | Home › Page not found |
When a post is in several categories, the trail uses the primary category set in Yoast SEO or Rank Math, if you use one of them. On page 2 and further of an archive, "Page 2" is added at the end.
In the editor, the trail is shown for the page or the "Preview with" item of the template you are editing.
Content tab settings
| Setting | What it does |
|---|---|
| Home link | Starts the trail with a link to the home page. On by default. |
| Home label | The text of the home link. Default: Home. Shown when Home link is on. |
| Home icon | An optional icon before the home label. Shown when Home link is on. |
| Icon only | Shows only the icon for the home link. The label stays available to screen readers. Shown when Home link is on. |
| Separator | Text or Icon between the items. Default: Text. |
| Separator text | The character between items. Default: /. Shown for Text. |
| Separator icon | The icon between items. Default: a chevron. Shown for Icon. |
| Current page | Ends the trail with the current page's title (not linked). On by default. |
| Structured data | Adds breadcrumb information for search engines. Skipped automatically when Yoast SEO is active, because Yoast adds its own. On by default. |
| Alignment | Start, Center or End. Can differ per device. |
Design tab settings
| Section | Settings |
|---|---|
| Breadcrumbs | Typography, Link color (with Normal and Hover tabs), Text color of the current page (Current tab), Current page typography, Current page max width (long titles are shortened with an ellipsis). |
| Separator & icons | Separator color, Separator spacing, Icon size. |
The Design tab also has the sections every element shares: Spacing & position, Background & border and Mask. See Spacing, size & position.
Behaviour tab
The Behaviour tab has the settings every element shares: anchor and classes, entrance animations, motion effects, visibility per device, display conditions and interactions. See Visibility.
Tips
- Breadcrumbs take little space and help visitors who arrive from a search engine find related content. Keep them small and quiet in color.
- On phones, set a Current page max width so a long post title does not wrap over several lines.