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

 var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"))
--rh-breadcrumb-caret-image-subtle

The subtle variant background image separating each breadcrumb item

 var(--rh-breadcrumb-caret-image-subtle, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23a3a3a3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"))
Design Tokens 0

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