Breadcrumbs
📖 Overview
The Breadcrumbs block displays navigational breadcrumb trails showing the current page’s location within the site hierarchy. It supports automatic generation based on page structure or integration with Rank Math SEO plugin breadcrumbs.
✏️ Content Options
| Field | Type | Required | Description |
|---|---|---|---|
| Breadcrumb Type | Radio | Yes | Choose how breadcrumbs are generated. Options: Rank Math SEO Breadcrumbs (if installed), Auto-generated |
| Separator Type | Radio | Yes | Choose between Text or Image separator. Only available when not using Rank Math |
| Separator Text | Text | No | Character to separate breadcrumb items (default: /). Only visible when Separator Type is Text |
| Separator Image | Image | No | Upload an image to use as the separator (e.g., arrow, chevron). Only visible when Separator Type is Image |
🎨 CSS Variables
The following CSS variables can be configured to customise the block’s appearance:
| Variable | Default Value |
|---|---|
--block-breadcrumbs-gap |
var(--spacing-xxxs) |
--block-breadcrumbs-separator-height |
1.6rem |
--block-breadcrumbs-separator-width |
auto |
--block-breadcrumbs-link-transition |
var(--transition-opacity) |
--block-breadcrumbs-link-hover-opacity |
0.7 |
--block-breadcrumbs-link-focus-opacity |
0.7 |
--block-breadcrumbs-link-active-opacity |
0.7 |
--block-breadcrumbs-link-current-font-weight |
500 |
--block-breadcrumbs-link-current-colour |
var(--colour-black) |
--block-breadcrumbs-link-current-hover-colour |
var(--colour-black) |
--block-breadcrumbs-link-current-focus-colour |
var(--colour-black) |
--block-breadcrumbs-link-current-active-colour |
var(--colour-black) |
--block-breadcrumbs-admin-background-colour |
var(--colour-rgb-gray-5) |
--block-breadcrumbs-admin-border-colour |
var(--colour-rgb-gray-10) |
--block-breadcrumbs-admin-border-radius |
var(--radius-card) |
--block-breadcrumbs-admin-padding |
var(--spacing-xxxs) |
--block-breadcrumbs-admin-text-align |
center |
♿ Accessibility
- Uses semantic
<nav>element witharia-label="Breadcrumb" - Implements
aria-current="page"on the current page item - Separators are hidden from screen readers using
aria-hidden="true" - Includes Schema.org BreadcrumbList structured data for SEO
- Uses ordered list (
<ol>) to convey hierarchical structure