Red Hat design system

Overview

Style

Guidelines

Code

Accessibility

Demos

Breadcrumb

Color Context

Custom Accessible Label

Non Interactive Last Item

Subtle

Truncate

Breadcrumb

Color Context

Custom Accessible Label

Non Interactive Last Item

Subtle

Truncate

Default breadcrumb with six hierarchical links and a current-page indicator on the last item.

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" />
);

Color Context

Breadcrumb displayed across light and dark color contexts, including the subtle variant.

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';

.subtle-heading {
  margin-block-start: var(--rh-space-6xl, 96px);
}

<rh-context-demo>
  <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>

  <h2 class="subtle-heading">Subtle:</h2>

  <rh-breadcrumb variant="subtle">
    <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>
</rh-context-demo>

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

import { Breadcrumb } from "@rhds/elements/react/rh-breadcrumb/rh-breadcrumb.js";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";

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

export const Demo = () => (
  <ContextDemo>
    <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>
    <h2 className="subtle-heading">Subtle:</h2>
    <Breadcrumb variant="subtle">
      <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>
  </ContextDemo>
  <link rel="stylesheet" href="../rh-breadcrumb-lightdom.css" />
);

Custom Accessible Label

Breadcrumb with a custom accessible-label attribute overriding the default nav aria-label.

import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';

<rh-breadcrumb accessible-label="Breadcrumb Navigation">
  <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 accessible-label="Breadcrumb Navigation">
    <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" />
);

Non Interactive Last Item

Breadcrumb where the last item is plain text instead of a link, showing the current page without interaction.

import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';

.subtle-heading {
  margin-block-start: var(--rh-space-6xl, 96px);
}

<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>Chapter 1. Understanding ROSA</li>
  </ol>
</rh-breadcrumb>

<h2 class="subtle-heading">Subtle:</h2>

<rh-breadcrumb variant="subtle">
  <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>Chapter 1. Understanding ROSA</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>Chapter 1. Understanding ROSA</li>
    </ol>
  </Breadcrumb>
  <h2 className="subtle-heading">Subtle:</h2>
  <Breadcrumb variant="subtle">
    <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>Chapter 1. Understanding ROSA</li>
    </ol>
  </Breadcrumb>
  <link rel="stylesheet" href="../rh-breadcrumb-lightdom.css" />
);

Subtle

Breadcrumb with the subtle variant, using muted separator icons and secondary text for the current page.

import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';

<rh-breadcrumb variant="subtle">
  <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 variant="subtle">
    <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" />
);

Truncate

Breadcrumb with truncation enabled, hiding middle items behind an ellipsis button that expands on activation.

import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';

<rh-breadcrumb truncate="">
  <ol>
    <li><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li><a href="#open-shift-aws">Red Hat OpenShift on AWS</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#introduction-to-rosa">Introduction to ROSA</a></li>
    <li><a href="#understanding-rosa" 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 truncate>
    <ol>
      <li><a href="#home">Home</a></li>
      <li><a href="#products">Products</a></li>
      <li><a href="#open-shift-aws">Red Hat OpenShift on AWS</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#introduction-to-rosa">Introduction to ROSA</a></li>
      <li>
        <a href="#understanding-rosa" aria-current="page">Chapter 1. Understanding ROSA</a>
      </li>
    </ol>
  </Breadcrumb>
  <link rel="stylesheet" href="../rh-breadcrumb-lightdom.css" />
);

Edit this page on GitHub

Other libraries

Feedback

Breadcrumb

Breadcrumb

Color Context

Custom Accessible Label

Non Interactive Last Item

Subtle

Truncate

Other libraries

Feedback

Related elements or patterns

Red Hat footer

Red Hat legal and privacy links

Red Hat legal and privacy links