Breadcrumb

v1.0.0

Shows the current location in a navigation hierarchy.

Default

<nav aria-label="Breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="/">Home</a></li>
		<li class="breadcrumb-item is-active" aria-current="page">Library</li>
	</ol>
</nav>

CSS Variables

Override these variables on the component or an ancestor.

--breadcrumb-padding-x: var(--spacer-0);
--breadcrumb-padding-y: var(--spacer-0);
--breadcrumb-divider-color: var(--text-subtle);
--breadcrumb-item-padding-x: var(--spacer-2);
--breadcrumb-item-active-color: var(--text-muted);