Breadcrumb

Hierarchical page trail with links and a current-page marker.

Primitive · navigation

Install

npx shadcn@latest add https://ndigo.dev/r/breadcrumb.json

To use the shorter @ndigo/breadcrumb form, configure the namespace in components.json.

Files

Source	Target	Type
registry/ui/breadcrumb/nd-breadcrumb.css	@ui/nd-breadcrumb/nd-breadcrumb.css	registry:file

Live example

See this component rendered live on the live examples page.

Dependencies

None.

Documentation

Usage

<nav class="nd-breadcrumb" aria-label="Breadcrumb">
    <ol class="nd-breadcrumb__list">
        <li class="nd-breadcrumb__item"><a class="nd-breadcrumb__link" href="/">Home</a></li>
        <li class="nd-breadcrumb__item"><a class="nd-breadcrumb__link" href="/docs">Docs</a></li>
        <li class="nd-breadcrumb__item"><span aria-current="page">Components</span></li>
    </ol>
</nav>

Accessibility

• Use a <nav> with a distinct aria-label (Breadcrumb is fine when there is only one).
• Keep the ordered list: the order carries meaning.
• Mark the last item with aria-current="page"; it is plain text, not a link.
• The CSS slash between items is presentational. Browsers that support CSS alt text keep it out of the accessibility tree; the link names still read in order.

Styling

Import nd-breadcrumb.css after the tokens. Links use the muted text token and the current page uses the text token with medium weight.