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. |
