Breadcrumbs
Show visitors where they are and help search engines understand it.
Breadcrumbs built on the server for every page: parents, primary categories from Yoast or Rank Math, shop and product categories, archives, search and 404, with BreadcrumbList structured data and plain, pill or arrow styles.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Breadcrumbs — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
Settings
General
| Setting | What you can set |
|---|---|
| Label | List |
Trail
| Setting | What you can set |
|---|---|
| Trail | auto or custom |
| Build for | post, page child, category, product, product cat, shop, author, date, … (10 in all) |
| Start with Home | On / off |
| Home label | Text |
| Home icon | house, outline, store or none |
| Icon only | On / off |
| Include the blog page on posts | On / off |
| Include the shop on products | On / off |
| Posts show their | category, post tag or none |
| Products show their category | On / off |
| Show the current page | On / off |
| Link the current page | On / off |
| Show on the front page | On / off |
| Shorten titles to (characters, 0 = no limit) | 0–120 |
| Structured data | jsonld, microdata or none |
Layout
| Setting | What you can set |
|---|---|
| Style | plain, pills or arrows |
| Separator | chevron, slash, arrow, dot, pipe or text |
| Separator text | Text |
| Text before | Text |
| Alignment | left, center or right |
| Long trails | Text |
| Long trails on phones | Text |
| Underline links on hover | On / off |
| Pill radius (px) | 0–999 |
Labels
| Setting | What you can set |
|---|---|
| Links | Colour |
| Links on hover | Colour |
| Current page | Colour |
| Separators | Colour |
| Item background | Colour |
| Current item background | Colour |
| Search results | Text |
| Page not found | Text |
| Author archive | Text |
| Page number | Text |
| Tag archive | Text |
Styles tab: colours, typography, spacing and borders, from WordPress's own design tools.
Tips
- Start with the Style choice — it changes the overall look the most; fine-tune the rest afterwards.
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- If Yoast or Rank Math breadcrumbs are also enabled, set Structured data to None to avoid two BreadcrumbList entries.
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor).
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
Related
- Also available for Elementor (Breadcrumbs).
- Works well with: Advanced Search, Mega Menu, Off Canvas.