Red Hat design system

Overview Style Guidelines Code Demos Accessibility

Usage
rh-breadcrumb

Usage
rh-breadcrumb

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN

<script type="module">
  import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
</script>

Import Map Example

<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>

NPM

npm install @rhds/elements

<script type="module">
  import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
</script>

JSPM

<script type="module">
  import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
</script>

Import Map Example

<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-breadcrumb/rh-breadcrumb.js": "./elements/rh-breadcrumb/rh-breadcrumb.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/controllers/style-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/style-controller.js",
      "@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/"
    }
  }
}
</script>

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

<link rel="stylesheet" href="/path/to/rh-breadcrumb/rh-breadcrumb-lightdom.css">

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

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>

Slot Name	Description
	Place an ordered list (`<ol>`) of your breadcrumbs into the slot

Attribute	DOM Property	Description	Type	Default
`accessible-label`	`accessibleLabel`	Customize the default `aria-label` on the `<nav>` container. Defaults to "Breadcrumb" if no attribute/property is set.	`string \| undefined`	`unknown`
`variant`	`variant`	Sets variants to breadcrumbs	`'subtle' \| undefined`	`unknown`

None

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 `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	`—`

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`

Edit this page on GitHub

Other libraries

Feedback

Breadcrumb