PatternFly

Breadcrumb

A breadcrumb provides page context to help users navigate more efficiently and understand where they are in the application hierarchy.

Examples

With dropdown

With buttons

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 <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-v5-c-breadcrumb
Describes <nav> landmark.
aria-label="[link name]"
.pf-v5-c-breadcrumb__link
If link has no text (icon), add an aria-label.
aria-current="page"
.pf-v5-c-breadcrumb__item, .pf-v5-c-breadcrumb__link
Indicates the current page within a set of pages.

Usage

Class
Applied to
Outcome
.pf-v5-c-breadcrumb
<nav>
Initiates a primary breadcrumb element. Required
.pf-v5-c-breadcrumb__list
<ol>
Initiates default breadcrumb ordered list.
.pf-v5-c-breadcrumb__item
<li>
Initiates default breadcrumb list item.
.pf-v5-c-breadcrumb__item-divider
<span>
Initiates default breadcrumb list item divider.
.pf-v5-c-breadcrumb__link
<a>, <button>
Initiates default breadcrumb list link.
.pf-v5-c-breadcrumb__title
<h1>
Initiates breadcrumb header.
.pf-m-current
.pf-v5-c-breadcrumb__link
Modifies to display the list item as the current item.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__item--FontSize
0.875rem
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__item--LineHeight
1.3
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__item--MarginRight
0.5rem
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__item-divider--Color
#151515
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__item-divider--MarginRight
0.5rem
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__item-divider--FontSize
0.875rem
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__link--Color
#06c
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__link--TextDecoration
none
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__link--hover--Color
#004080
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__link--hover--TextDecoration
underline
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__link--m-current--Color
#151515
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__link--BackgroundColor
transparent
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__heading--FontSize
0.875rem
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__dropdown--MarginTop
calc(0.375rem * -1)
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__dropdown--MarginRight
calc(0.5rem * -1)
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__dropdown--MarginBottom
calc(0.375rem * -1)
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__dropdown--MarginLeft
calc(0.5rem * -1)
.pf-v5-c-breadcrumb--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight
1.3
.pf-v5-c-breadcrumb__link:hover--pf-v5-c-breadcrumb__link--Color
#004080
.pf-v5-c-breadcrumb__link:hover--pf-v5-c-breadcrumb__link--TextDecoration
underline

View source on GitHub