Standard
Three-level breadcrumb with linked parent pages and current page indicator
<nav class="nds-breadcrumb-nav" aria-label="Breadcrumb">
<ol class="nds-breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="#">Components</a></li>
<li aria-current="page">Breadcrumb</li>
</ol>
</nav>
Two Level
Minimal breadcrumb for pages one level deep
<nav class="nds-breadcrumb-nav" aria-label="Breadcrumb">
<ol class="nds-breadcrumb">
<li><a href="/">Home</a></li>
<li aria-current="page">Components</li>
</ol>
</nav>
Long Title
Truncate long page titles with nds-truncate to prevent wrapping
<nav class="nds-breadcrumb-nav" aria-label="Breadcrumb">
<ol class="nds-breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="#">Components</a></li>
<li class="nds-truncate" aria-current="page">Very Long Page Title</li>
</ol>
</nav>
Automatic Collapsing
Breadcrumbs with 5+ levels collapse into a dropmenu showing Home, ellipsis, and the last two items
<!-- Write the full breadcrumb. JS collapses 5+ levels automatically -->
<nav class="nds-breadcrumb-nav" aria-label="Breadcrumb">
<ol class="nds-breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Subcategory</a></li>
<li><a href="#">Section</a></li>
<li><a href="#">Parent</a></li>
<li aria-current="page">Current Page</li>
</ol>
</nav>
Built-in Features
Auto-initialization
Activates when .nds-breadcrumb-nav is on the page. No JavaScript setup required.
Smart Collapsing
Deep hierarchies collapse into a dropmenu. Shows Home, ellipsis, and last two items.
Keyboard Support
Collapsed dropmenu is fully keyboard accessible via Enter, Space, and Escape.
Title Truncation
Add nds-truncate to the current page item to prevent a long title from wrapping.
Usage Guidelines
When to Use
- Use breadcrumbs on pages 2+ levels deep to show location within the site hierarchy
- Always start with "Home" as the first item. The current page is the last item and should not be a link
- Keep titles short and scannable. Use nds-truncate for pages with long names
- Write the full hierarchy in HTML. The JS handles collapsing automatically for deep structures
- Skip breadcrumbs on the homepage and single-level landing pages
Modifier Classes
| Class | Element | Description |
|---|---|---|
nds-loading | .nds-breadcrumb-nav | Shows the skeleton pulse animation while breadcrumb content is loading. Alias for data-state="loading" |
nds-breadcrumb-ellipsis | <li> | Applied by JS to the generated collapse container holding the dropmenu for hidden items |
Data Attributes
| Attribute | Element | Description |
|---|---|---|
data-nds-breadcrumb-initialized | .nds-breadcrumb-nav | Stamped by JS after init. Releases the pre-init skeleton. Prevents double-initialization on reinit() calls |
data-state="loading" | .nds-breadcrumb-nav | Triggers the skeleton pulse animation. Equivalent to adding nds-loading |
JavaScript API
The NDS.Breadcrumb API handles auto-collapsing. For dynamically added breadcrumbs, call NDS.Breadcrumb.reinit() to process new elements.
// Re-scan and initialize new breadcrumbs
NDS.Breadcrumb.init();
// Shorthand for init()
NDS.Breadcrumb.reinit();
// Create instance for a specific element
const instance = NDS.Breadcrumb.create(document.querySelector('.nds-breadcrumb-nav'));
// Access existing instance
const existing = document.querySelector('.nds-breadcrumb-nav').ndsBreadcrumb;
// Clean up
instance.destroy();