Breadcrumb
On this page
On this page
Overview
A breadcrumb navigation is a secondary navigation element consisting of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application.
Edit element properties
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">Customize the default aria-label on the <nav> container.
Defaults to "Breadcrumb" if no attribute/property is set.
Sets variants to breadcrumbs
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Planned
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
Three placeholder breadcrumb links and a current page breadcrumb
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component should be added to the RH Shared Libs repo at a later date |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
