Breadcrumb
The Breadcrumb is a native web component that displays the navigation hierarchy as a trail of links separated by an automatically inserted "/" chevron. Use it to indicate where the user is within the site structure and let them quickly jump back to previous levels. It's composed of `pura-breadcrumb` (the nav/ol container) and `pura-breadcrumb-item` (each crumb).
Preview
<pura-breadcrumb>
<pura-breadcrumb-item href="/">Home</pura-breadcrumb-item>
<pura-breadcrumb-item href="/produtos">Products</pura-breadcrumb-item>
<pura-breadcrumb-item href="/produtos/calcados">Footwear</pura-breadcrumb-item>
<pura-breadcrumb-item current>Running shoes</pura-breadcrumb-item>
</pura-breadcrumb>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
href | string | — | On pura-breadcrumb-item: renders the crumb as a link (<a>) to the given URL. |
current | boolean | false | On pura-breadcrumb-item: marks the current page (aria-current=page) and renders it as highlighted text, without a link. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/breadcrumb.js"></script>import "./pura/lib/breadcrumb.js";