Breadcrumb
Importing
Add rh-breadcrumb to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
</script>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>rh-breadcrumb
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.
| Slot Name | Description |
|---|---|
|
Place an ordered list ( |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
accessible-label |
accessibleLabel |
Customize the default |
|
|
variant |
variant |
Sets variants to breadcrumbs |
|
|
| Part Name | Description |
|---|---|
container |
container element for slotted breadcrumb |
| CSS Property | Description | Default |
|---|---|---|
--rh-breadcrumb-link-color |
The link color for each anchor in the list |
var(--rh-color-interactive-blue-darker, #0066cc)
|
--rh-breadcrumb-link-color-current-page |
The current page's color |
var(--rh-color-text-primary-on-light, #151515)
|
--rh-breadcrumb-link-color-current-page-subtle |
The current page's color for the |
var(--rh-color-text-secondary-on-light, #4d4d4d)
|
--rh-breadcrumb-link-color-hover |
The link color on hover/focus/active for each anchor in the list |
var(--rh-color-interactive-blue-darkest, #003366)
|
--rh-breadcrumb-link-color-visited |
The visited color for each breadcrumb link |
var(--rh-color-interactive-purple-darker, #5e40be)
|
--rh-breadcrumb-link-color-visited-hover |
The visited color on hover for each breadcrumb link |
var(--rh-color-interactive-purple-darkest, #21134d)
|
--rh-breadcrumb-link-focus-outline-color |
The link focus outline color |
var(--rh-color-border-interactive-on-light, #0066cc)
|
--rh-breadcrumb-li-padding-inline-end |
Sets the spacing between each breadcrumb item. |
var(--rh-breadcrumb-li-padding-inline-end, 42px)
|
--rh-breadcrumb-caret-image |
The default background image separating each breadcrumb item |
—
|
--rh-breadcrumb-caret-image-subtle |
The |
—
|
| Token | Copy |
|---|---|
--rh-border-radius-default
|
|
--rh-color-border-interactive
|
|
--rh-color-icon-secondary
|
|
--rh-color-icon-subtle
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-interactive-primary-hover
|
|
--rh-color-interactive-primary-visited-hover
|
|
--rh-color-text-primary
|
|
--rh-color-text-secondary
|
|
--rh-font-size-body-text-sm
|
|
--rh-line-height-body-text
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
