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 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 Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall 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
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

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.

import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
 
<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">
 
import { Breadcrumb } from "@rhds/elements/react/rh-breadcrumb/rh-breadcrumb.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <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>
  </Breadcrumb>
  <link rel="stylesheet" href="../rh-breadcrumb-lightdom.css" />
);

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.

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.

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.

 View source on GitHub

Status

When to use

  • When you want to help orient a user and show where they are in the page hierarchy
  • When you want to provide a secondary method for navigating to parent pages of the current page

Status checklist

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