Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.
<nve-breadcrumb>
<nve-button><a href="#" target="_self">Item 1</a></nve-button>
<nve-button><a href="#" target="_self">Item 2</a></nve-button>
<nve-button><a href="#" target="_self">Item 3</a></nve-button>
<span>You Are Here</span>
</nve-breadcrumb>
Installation
<script type="module">
import '@nvidia-elements/core/breadcrumb/define.js';
</script>
<nve-breadcrumb>
<nve-button><a href="#" target="_self">Item 1</a></nve-button>
<nve-button><a href="#" target="_self">Item 2</a></nve-button>
<nve-button><a href="#" target="_self">Item 3</a></nve-button>
<span>You Are Here</span>
</nve-breadcrumb>
nve api.get nve-breadcrumb
Breadcrumb with home icon button for quick navigation to the root page, offering a compact starting point.
<nve-breadcrumb>
<nve-icon-button icon-name="home" size="sm"
><a href="#" target="_self" aria-label="link to first page"></a
></nve-icon-button>
<nve-button><a href="#" target="_self">Item 1</a></nve-button>
<nve-button><a href="#" target="_self">Item 2</a></nve-button>
<span>You Are Here</span>
</nve-breadcrumb>
Breadcrumb with overflow menu for collapsed navigation levels, ideal for deep hierarchies in limited space.
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days