Layout · Gutenberg
Breadcrumbs block for WordPress
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Inspector panels on this block: Content, Separator, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Separator style” options: Chevron ›, Arrow →, Slash /, Dot ·, Dash –; “Layout — Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Layout → search “Breadcrumbs” (block name `blockenberg/breadcrumbs` in block.json). Style it in the sidebar after insert.
How to use Breadcrumbs block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Breadcrumbs”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Content. Set “Show Home link”, “Home label”, “Home URL”, “Show home icon”.
- Check the published page. The view script reads HTML data attributes: data-separator. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Home link | On/off toggle in the inspector. On by default. Saved as `showHome`. |
| Home label | Text field in the inspector. block.json default: Home. Saved as `homeLabel`. |
| Home URL | Text field in the inspector. block.json default: /. Saved as `homeUrl`. |
| Show home icon | On/off toggle in the inspector. On by default. Saved as `showHomeIcon`. |
| Show current page | On/off toggle in the inspector. On by default. Saved as `showCurrentPage`. |
| Schema.org markup (BreadcrumbList) | On/off toggle in the inspector. On by default. Saved as `schemaEnabled`. |
| Separator style | Select control; the chosen value is saved on the block. Options: Chevron ›; Arrow →; Slash /; Dot ·; Dash –; Custom. block.json default: chevron. Saved as `separator`. |
| Custom separator character | Text field in the inspector. block.json default: /. Saved as `customSeparator`. |
| Layout — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `alignment`. |
| Item spacing (px) | Numeric range control in the inspector. Range 2–32. block.json default: 8. Saved as `itemSpacing`. |
| Vertical padding (px) | Numeric range control in the inspector. Range 0–40. block.json default: 10. Saved as `paddingV`. |
| Colors — Background | Color control in the inspector. Saved as `bgColor`. |
| Link color | Color control in the inspector. block.json default: #2563eb. Saved as `linkColor`. |
| Link hover | Color control in the inspector. block.json default: #1d4ed8. Saved as `linkHoverColor`. |
| Current page | Color control in the inspector. block.json default: #111827. Saved as `activeColor`. |
| Separator | Color control in the inspector. block.json default: #9ca3af. Saved as `separatorColor`. |
| Text (general) | Color control in the inspector. block.json default: #6b7280. Saved as `textColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-separator.
- When schema is on, the script injects FAQPage JSON-LD into the document.
When this is the right block
- SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy — that is the job of Breadcrumbs, not a generic content block.
- Use it when you need the editor control labeled “Show Home link”, which exists on this block’s inspector.
- It matches pages about breadcrumbs, navigation, seo.
- Pick this when you want FAQPage JSON-LD from the same markup visitors click.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Breadcrumbs block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Breadcrumbs”. It sits under Layout. After insert, open Content and set “Show Home link”, “Home label”, “Home URL”, “Show home icon”.
Does Breadcrumbs output FAQ schema?
Yes, when the schema toggle on this block is on. The front-end script injects FAQPage JSON-LD. That is not the same as Yoast/Rank Math site-wide schema.
Is the Breadcrumbs Gutenberg block free?
Yes. Breadcrumbs ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Breadcrumbs to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Content, Separator, Layout).
Related layout blocks
Content Menu
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline.
Mega Menu
Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels.
Page List
A styled list of pages or links with optional icons, hierarchy, and rich color controls.
Side Menu
Hierarchical vertical navigation with collapsible sections for docs, wikis, and multi-section pages.
Sticky Header
A fully-styled site header with logo (image or text), navigation links, and an optional CTA button. Sticks to the top on scroll with a shrink animation. Supports light, dark, glass, and gradient style variants.
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Breadcrumbs from the Gutenberg inserter.