Displays the path to the current resource using a hierarchy of links.
<nav class="bc"> <a class="bc-item bc-home" href="/"><span class="material-icons-round">home</span></a> <span class="bc-sep">/</span> <a class="bc-item" href="/components">Components</a> <span class="bc-sep">/</span> <span class="bc-item active">Breadcrumb</span> </nav>
Installation
Built with pure HTML and CSS. Include ds-shared.css in your project.
pnpm add @norbielink/ds
Usage
Import
<link rel="stylesheet" href="ds-shared.css">
Basic structure
<nav class="bc"> <a class="bc-item" href="/">Home</a> <span class="bc-sep">/</span> <a class="bc-item" href="/components">Components</a> <span class="bc-sep">/</span> <span class="bc-item active">Current</span> </nav>
Examples
Separator variations
<nav class="bc"> <a class="bc-item" href="/">Home</a> <span class="bc-sep">·</span> <span class="bc-item active">Page</span> </nav>
API Reference
Classes
| Class | Description |
|---|---|
bc | Breadcrumb container (flex row) |
bc-item | Individual breadcrumb link |
bc-item.active | Current (non-linked) page — bold |
bc-sep | Separator character |
bc-dk | Dark mode modifier |