Breadcrumb
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.
Status
- Figma library:
-
Ready - RH Elements:
-
Ready - WebRH:
-
Ready
Sample element
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>
<link rel="stylesheet" href="../rh-breadcrumb-lightdom.css">
<script type="module">
import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
</script>
When to use
- When you want to help orient a user and 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
Property | Status | Meaning |
---|---|---|
Figma library |
|
Component is available in the Figma library |
RH Elements |
|
Component is available in the RH Elements repo |
WebRH |
|
Component is available in the WebRH repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.