Breadcrumb
Breadcrumb
import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
<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">
Color Context
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
.subtle-heading {
margin-block-start: var(--rh-space-6xl, 96px);
}
<rh-context-demo>
<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>
<h2 class="subtle-heading">Subtle:</h2>
<rh-breadcrumb variant="subtle">
<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-context-demo>
<link rel="stylesheet" href="../rh-breadcrumb-lightdom.css">
Custom Accessible Label
import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
<rh-breadcrumb accessible-label="Breadcrumb Navigation">
<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">
Non Interactive Last Item
import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
.subtle-heading {
margin-block-start: var(--rh-space-6xl, 96px);
}
<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>Chapter 1. Understanding ROSA</li>
</ol>
</rh-breadcrumb>
<h2 class="subtle-heading">Subtle:</h2>
<rh-breadcrumb variant="subtle">
<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>Chapter 1. Understanding ROSA</li>
</ol>
</rh-breadcrumb>
<link rel="stylesheet" href="../rh-breadcrumb-lightdom.css">
Subtle
import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';
<rh-breadcrumb variant="subtle">
<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">