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-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-c-breadcrumb | Describes <nav> landmark. |
aria-label="[link name]" | .pf-c-breadcrumb__link | If link has no text (icon), add an aria-label. |
aria-current="page" | .pf-c-breadcrumb__item, .pf-c-breadcrumb__link | Indicates the current page within a set of pages. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-breadcrumb | <nav> | Initiates a primary breadcrumb element. Required |
.pf-c-breadcrumb__list | <ol> | Initiates default breadcrumb ordered list. |
.pf-c-breadcrumb__item | <li> | Initiates default breadcrumb list item. |
.pf-c-breadcrumb__item-divider | <span> | Initiates default breadcrumb list item divider. |
.pf-c-breadcrumb__link | <a>, <button> | Initiates default breadcrumb list link. |
.pf-c-breadcrumb__title | <h1> | Initiates breadcrumb header. |
.pf-m-current | .pf-c-breadcrumb__link | Modifies to display the list item as the current item. |
CSS variables
| .pf-c-breadcrumb | --pf-c-breadcrumb__item--FontSize | 0.875rem | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__item--LineHeight | 1.3 | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__item--MarginRight | 0.5rem | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__item-divider--Color | #8a8d90 | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__item-divider--MarginRight | 0.5rem | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__item-divider--FontSize | 0.875rem | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--Color | #06c | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--TextDecoration | none | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--hover--Color | #004080 | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--hover--TextDecoration | underline | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--m-current--Color | #151515 | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__heading--FontSize | 0.875rem | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__dropdown--MarginTop | calc(0.375rem * -1) | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__dropdown--MarginRight | calc(0.5rem * -1) | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__dropdown--MarginBottom | calc(0.375rem * -1) | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__dropdown--MarginLeft | calc(0.5rem * -1) | |
| .pf-c-breadcrumb | --pf-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight | 1.3 | |
| .pf-c-breadcrumb__link:hover | --pf-c-breadcrumb__link--Color | #004080 | |
| .pf-c-breadcrumb__link:hover | --pf-c-breadcrumb__link--TextDecoration | underline | |
View source on GitHub
