--- id: Breadcrumb section: components cssPrefix: pf-v5-c-breadcrumb ---import './Breadcrumb.css' ## Examples ### Basic ```html ``` ### Without home link ```html ``` ### With heading ```html ``` ### With dropdown ```html ``` ### With buttons ```html ``` ## 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-v5-c-breadcrumb__list` is 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 `

` 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-v5-c-breadcrumb` | Describes `
` landmark. | | `aria-label="[link name]"` | `.pf-v5-c-breadcrumblink` | If link has no text (icon), add an aria-label. | | `aria-current="page"` | `.pf-v5-c-breadcrumbitem`, `.pf-v5-c-breadcrumblink` | Indicates the current page within a set of pages. | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-breadcrumb` | `
` | Initiates a primary breadcrumb element. Required | | `.pf-v5-c-breadcrumblist` | `
` | Initiates default breadcrumb ordered list. | | `.pf-v5-c-breadcrumbitem` | `
` | Initiates default breadcrumb list item. | | `.pf-v5-c-breadcrumbitem-divider` | `` | Initiates default breadcrumb list item divider. | | `.pf-v5-c-breadcrumb__link` | ``, `