Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Breadcrumb

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-breadcrumbImportingUsagerh-breadcrumb

Importing

Add rh-breadcrumb to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

 
<link rel="stylesheet" href="/path/to/rh-breadcrumb/rh-breadcrumb-lightdom.css">

Usage 

<rh-breadcrumb>
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Red Hat OpenShift on AWS</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Introduction to ROSA</a></li>
    <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
  </ol>
</rh-breadcrumb>

<link rel="stylesheet" href="../rh-breadcrumb-lightdom.css">
<script type="module">
  import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
</script>
Copy to Clipboard Wrap lines

rh-breadcrumb

A breadcrumb provides secondary navigation for showing the user's hierarchical location within a site. Users must slot an <ol> with <li> items containing <a> links. The last item should carry aria-current="page" so screen readers announce the current page. Keyboard users navigate breadcrumb links with Tab and activate them with Enter.

Theming

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

Slots 1

Slot Name Summary Description
[default]

Expects a single <ol> block element with <li> items

Each <li> should contain an inline <a> text link. The final <a> should set aria-current="page". The last <li> may contain inline text without a link for a non-interactive current page indicator.
Note: [default] unnamed slots do not have a slot="name" attribute.

Attributes 3

Attribute DOM Property Description Type Default
accessible-label accessibleLabel

Customizes the aria-label on the internal <nav> element. Defaults to "Breadcrumb" when not set. Authors should override this value when more than one breadcrumb navigation appears on the same page so screen readers can distinguish between them.

 
string
 
unknown
variant variant

Sets the visual variant for the breadcrumb. The subtle variant uses secondary text color for the current-page item and a muted separator icon, which authors should use on darker backgrounds or when the breadcrumb should appear less prominent.

 
'subtle'
 
unknown
truncate truncate

When true, breadcrumb lists with five or more items are truncated: middle items are hidden and replaced by an ellipsis button that users can activate to reveal the full trail. Lists with fewer than five items are not affected. The truncation button is keyboard-accessible and announces its purpose to screen readers.

 
boolean
 
false

Methods 1

Method Name Description
firstUpdated()

After first render, applies truncation when the truncate attribute is set and the list contains five or more items. Middle items (all except the first and last two) are hidden and an ellipsis button is inserted before them.

Events 0

None

CSS Shadow Parts 1

Part Name Summary Description
container

nav landmark with aria-label for assistive technology

CSS Custom Properties 3

CSS Property Description Default
--rh-breadcrumb-caret-image

The mask-image separator icon between items; theme by providing an SVG data URI. Uses --rh-color-icon-secondary design token for the icon background color.

 {svg encoded as data URI}
--rh-breadcrumb-li-padding-inline-end

Inline-end spacing per item; defaults to the --rh-space-lg design token (16px)

 var(--rh-space-lg, 16px)
--rh-breadcrumb-link-color

Link color for anchors; defaults to the --rh-color-interactive-primary-default design token

 var(--rh-color-interactive-primary-default)

Design Tokens 0

None

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify