Breadcrumb
Breadcrumbs act as a resource to help users navigate more efficiently and provide context to help users understand where they are in the application hierarchy. Use breadcrumbs in addition to your global navigation to display a user's location in the application. Related design guidelines: Navigation system
ExamplesDocumentationCSS VariablesExamples
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> | 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--FontWeight | 500 | ||
| .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--FontWeight | 500 | ||
| .pf-c-breadcrumb | --pf-c-breadcrumb__link--m-current--Color | #151515 | ||
| .pf-c-breadcrumb | --pf-c-breadcrumb__heading--FontSize | 0.875rem | ||
| .pf-m-redhat-font .pf-c-breadcrumb | --pf-c-breadcrumb__link--FontWeight | 400 | ||
| .pf-m-redhat-font .pf-c-breadcrumb | --pf-c-breadcrumb__item--FontWeight | 400 | ||
