Examples
Documentation
Overview
A breadcrumb is a list of links to display a user's navigational hierarchy. The last item of the breadcrumb list indicates the current page's location.
.pf-v6-c-breadcrumb__listis the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
In the event that a page does not have a traditional <h1> page title, a heading can be included in the breadcrumbs and an optional link within.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-label="[landmark description]" | .pf-v6-c-breadcrumb | Describes <nav> landmark. |
aria-label="[link name]" | .pf-v6-c-breadcrumb__link | If link has no text (icon), add an aria-label. |
aria-current="page" | .pf-v6-c-breadcrumb__item, .pf-v6-c-breadcrumb__link | Indicates the current page within a set of pages. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-breadcrumb | <nav> | Initiates a primary breadcrumb element. Required |
.pf-v6-c-breadcrumb__list | <ol> | Initiates default breadcrumb ordered list. |
.pf-v6-c-breadcrumb__item | <li> | Initiates default breadcrumb list item. |
.pf-v6-c-breadcrumb__item-divider | <span> | Initiates default breadcrumb list item divider. |
.pf-v6-c-breadcrumb__link | <a>, <button> | Initiates default breadcrumb list link. |
.pf-v6-c-breadcrumb__title | <h1> | Initiates breadcrumb header. |
.pf-m-current | .pf-v6-c-breadcrumb__link | Modifies to display the list item as the current item. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__item--FontSize | 0.75rem | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__item--LineHeight | 1.5 | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__item--MarginInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__item-divider--Color | (In light theme) #1f1f1f | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__item-divider--FontSize | var( --pf-t--global--font--size--body--sm) | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__link--PaddingInlineStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__link--PaddingInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__link--Color | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__link--TextDecorationLine | underline | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__link--TextDecorationStyle | solid | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__link--hover--Color | (In light theme) #004d99 | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__link--hover--TextDecorationLine | underline | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle | solid | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__link--m-current--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__link--BackgroundColor | transparent | ||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__heading--FontSize | var( --pf-t--global--font--size--body--sm) | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-breadcrumb) | --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart | 0.25rem | ||
| ||||
| .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) | --pf-v6-c-breadcrumb__link--PaddingInlineStart | 0 | ||
| .pf-v6-c-breadcrumb__link:is(:hover, :focus) | --pf-v6-c-breadcrumb__link--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-breadcrumb__link:is(:hover, :focus) | --pf-v6-c-breadcrumb__link--TextDecorationLine | underline | ||
| ||||
| .pf-v6-c-breadcrumb__link:is(:hover, :focus) | --pf-v6-c-breadcrumb__link--TextDecorationStyle | solid | ||
| ||||
