Shilp Sutra
ui · Primitive rsc-safe

Breadcrumb

@devalok/shilp-sutra/ui/breadcrumbView in Storybook

Preview

Variants

basic trail
with ellipsis (collapsed)

Reference

  • Import: @devalok/shilp-sutra/ui/breadcrumb
  • Server-safe: Yes
  • Category: ui

Compound Components

Breadcrumb (root nav) BreadcrumbList (ol) BreadcrumbItem (li) BreadcrumbLink (for clickable items) | BreadcrumbPage (for current page) BreadcrumbSeparator (auto-rendered or custom) BreadcrumbEllipsis (for collapsed items)

Defaults

none

Example

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Settings</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Composability

  • Compound structure only — no context cascade, each part is standalone. The semantic shape (<nav> → <ol> → <li>) is what matters for a11y, not any internal state.
  • BreadcrumbLink vs BreadcrumbPage: Use BreadcrumbLink for everything except the current page; BreadcrumbPage for the current page (not clickable, renders without href, announced as "current page" via aria-current).
  • Router integration: Use <BreadcrumbLink asChild><NextLink href="/x">...</NextLink></BreadcrumbLink> (Radix Slot pattern).
  • Truncation: For long paths, use BreadcrumbEllipsis between the first and last items instead of showing all. Pair with a DropdownMenu (open the ellipsis to show hidden intermediate items) if you need to expose them.
  • PageHeader (composed) auto-builds Breadcrumb from its breadcrumbs prop — use that higher-level component for page-top breadcrumbs and save this component for inline or custom positioning.

Gotchas

  • Use BreadcrumbPage for the current (non-clickable) page, BreadcrumbLink for navigable items
  • Don't wrap BreadcrumbPage in a link — it's the current location by definition

Changes

v0.18.0

  • Added BreadcrumbProps, BreadcrumbLinkProps type exports

v0.1.0

  • Added Initial release