Breadcrumbs
📖 Overview
Display breadcrumb navigation showing the current page’s location in the site hierarchy.
✏️ Content Options
| Field | Type | Required | Description |
|---|---|---|---|
| Breadcrumb type | Radio | Yes | Auto-generated / Rank Math SEO (if present) |
| Separator type | Radio | Yes | Text / Image (when not Rank Math) |
| Separator | Text | No | Separator text (default /) |
| Separator image | Image | No | When separator type is Image |
⚙️ Settings Options
| Setting | Type | Default | Description |
|---|---|---|---|
| — | |||
🎨 CSS Variables
The following CSS variables can be configured (see assets/scss/configuration.scss).
Block
| Variable | Default Value |
|---|---|
--block-breadcrumbs-admin-background-colour |
var(--colour-neutral-4) |
--block-breadcrumbs-admin-border-colour |
var(--colour-black) |
--block-breadcrumbs-admin-border-radius |
var(--radius-card) |
--block-breadcrumbs-admin-padding |
var(--spacing-xxxs) |
--block-breadcrumbs-admin-text-align |
center |
--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-colour |
var(--colour-brand-1-100) |
--block-breadcrumbs-link-colour-hover |
var(--colour-brand-1-40) |
--block-breadcrumbs-link-colour-focus |
var(--colour-brand-2-base) |
--block-breadcrumbs-link-colour-active |
var(--colour-brand-2-base) |
--block-breadcrumbs-link-colour-disabled |
var(--colour-neutral-3) |
--block-breadcrumbs-link-current-colour |
var(--colour-brand-1-100) |
| Dark mode | |
--block-breadcrumbs-admin-background-colour-dark |
var(--colour-neutral-8) |
--block-breadcrumbs-admin-border-colour-dark |
var(--colour-white) |
--block-breadcrumbs-link-colour-dark |
var(--colour-white) |
--block-breadcrumbs-link-colour-hover-dark |
var(--colour-neutral-3) |
--block-breadcrumbs-link-colour-focus-dark |
var(--colour-brand-2-base) |
--block-breadcrumbs-link-colour-active-dark |
var(--colour-brand-2-base) |
--block-breadcrumbs-link-colour-disabled-dark |
var(--colour-neutral-3) |
--block-breadcrumbs-link-current-colour-dark |
var(--colour-white) |
Note: Default values are defined in the block map in assets/scss/configuration.scss. Dark-mode variants are applied inside .layout--dark.