Breadcrumb

uistable

Breadcrumb — from shadcn/ui (radix-nova style).

npx shadcn add @krawma/breadcrumb

npm: lucide-react@^1.22.0, radix-ui@^1.6.1 · registry: @krawma/utils

Preview

Depends on

utils

Purpose

A navigation trail showing the current page's location in the hierarchy, with links back to ancestors. Navigational — not tabs, not a wizard/stepper.

Anatomy

Breadcrumb (<nav>) › BreadcrumbList › BreadcrumbItem (BreadcrumbLink or BreadcrumbPage for the current page) with BreadcrumbSeparator between, and BreadcrumbEllipsis to collapse long trails.

Style

No variants — token-backed inline trail; the current page is emphasized and non-linked.

Behavior & functionality

Static navigation. Use BreadcrumbEllipsis (optionally with a dropdown) to collapse deep trails on small screens.

Accessibility

The <nav> should be labelled (e.g. aria-label="Breadcrumb"); the current page uses BreadcrumbPage with aria-current="page" and is not a link.
Links are standard anchors — full keyboard/AT support comes for free.

Do / Don't

✅ Mark the current page with BreadcrumbPage (not a link).
❌ Don't use breadcrumbs to switch views on the same page — use tabs.