Breadcrumb
Introduction
The Breadcrumb component is a navigation aid that displays the current page's location within an hierarchical structure of the site. It helps users trace their path from the home page back to their current position and navigate back up the hierarchy easily.
The Breadcrumb is fully integrated as a breadcrumb block in the Page Builder, allowing content authors and developers to easily configure visual styles, dividers/separators, and responsive sizing directly within the CMS.
Usage
These examples illustrate how content editors bind and structure navigation components.
1. Standard Navigation Breadcrumb
A classic structural breadcrumb configuration showing home, secondary category, and terminal text page markers.
{
"type": "breadcrumb",
"items": [
{ "label": "Home", "href": "/" },
{ "label": "Components", "href": "/components" },
{ "label": "Breadcrumb" }
]
}
2. Custom Separator (Slash Divider)
Uses a custom text divider character (like a slash "/") to separate navigation items.
{
"type": "breadcrumb",
"separator": "/",
"items": [
{ "label": "Home", "href": "/" },
{ "label": "Library", "href": "/library" },
{ "label": "Overview" }
]
}
3. Accented Sizing & Visual Style
Adjusts the overall scale to small and applies a customized visual underline style for a highlighted layout feel.
{
"type": "breadcrumb",
"variant": "underline",
"size": "sm",
"items": [
{ "label": "Console", "href": "/console" },
{ "label": "Resources", "href": "/console/resources" },
{ "label": "Deployments" }
]
}
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Separator (separator) | string | "chevron-right" | Custom character divider placed between items. |
Visual Style (variant) | select | "plain" | The visual styling of links. • Options: "plain", "underline". |
Size Scale (size) | select | "md" | Controls overall font and chevron scale. • Options: "xs", "sm", "md", "lg". |
Navigation Items (items) | list | [] | Ordered collection of page items. (See breadcrumb items schema below). |
Custom Class (class) | string | - | Custom CSS class overrides applied directly to the breadcrumb container. |
Breadcrumb Items Schema
Every entry inside the items array accepts the following parameters:
| Property | CMS Field Type | Required | Description |
|---|---|---|---|
Display Text (label) | string | Yes | Label text rendered for the item segment. |
Target Route (href) | string | No | Target URL or page route. If omitted, renders as plane current-page text. |
Current Page (current) | boolean | false | Sets the item to denote the active page (automatically true for the last item). |
Developer Notes & Accessibility
- ARlA-Compliant Hierarchy: The component automatically renders inside an accessible semantic navigation element (
<nav aria-label="Breadcrumb">). - Active Page ARIA: The final terminal element (where
hrefis omitted orcurrentis set) automatically receivesaria-current="page"to comply with screen reader accessibility guidelines. - Micro-Interaction Styling: Links automatically inherit layout hover triggers and transitions, reflecting parent color palette accents smoothly.