Skip to main content Red Hat Design System logo Contribute on Github v1.4.5

Breadcrumb

Overview Style Guidelines Code Demos Accessibility

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 0

None
© 2021-2024 Red Hat, Inc. Deploys by Netlify