Breadcrumb

Overview Style Guidelines Code Demos Accessibility
  1. Installation
  2. Usage
  3. rh-breadcrumb
  1. Installation
  2. Usage
  3. rh-breadcrumb

Installation

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>

rh-breadcrumb

Slots 1
Slot Name Description

Place an ordered list (<ol>) of your breadcrumbs into the slot
Attributes 2
DOM Property Description Type Default
accessibleLabel

Customize the default aria-label on the <nav> container. Defaults to "Breadcrumb" if no attribute/property is set.

 
string | undefined

unknown
variant

Sets variants to breadcrumbs

 
'subtle' | undefined

unknown
Methods 0

None

 Events 0

None

 CSS Shadow Parts 1
Part Name Description
container

container element for slotted breadcrumb
CSS Custom Properties 10
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 subtle variant

 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 subtle variant background image separating each breadcrumb item

 —
Design Tokens 11

Token Copy
--rh-border-radius-default
--rh-color-border-interactive
--rh-color-interactive-primary-default
--rh-color-interactive-primary-hover
--rh-color-interactive-primary-visited-default
--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-md