Breadcrumb

Usage#

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "neelam-ui";
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

The last item is not a link#

BreadcrumbPage renders a <span aria-current="page">, not an anchor. Per the WAI-ARIA breadcrumb pattern there is nowhere for the current page to navigate to, and aria-current is what tells assistive tech which item you are on.

Collapsing a long trail#

BreadcrumbEllipsis stands in for the middle of a deep hierarchy:

Like BreadcrumbSeparator, it is decorative and hidden from assistive tech, but it carries an sr-only "More" so it is not a completely silent gap if you wrap it in something interactive.

Custom separators#

BreadcrumbSeparator renders a chevron by default. Pass children for anything else:

<BreadcrumbSeparator>/</BreadcrumbSeparator>

Links and routers#

BreadcrumbLink is a plain <a>, so href works as it always does. With a client-side router, render the router's own link inside it, or spread its props onto it — nothing here depends on the element being an anchor this library created.

Keyboard#

There is no arrow-key navigation here. A breadcrumb is a short list of ordinary links, not a composite widget, so each link is its own tab stop.

Accessibility#

• The wrapper is <nav aria-label="breadcrumb">, which is what lets a screen reader user jump to it by landmark. Unlike a radio group's label, this one can be hardcoded — a breadcrumb is always a breadcrumb.
• The trail is an <ol>, because it is a strict hierarchy rather than an arbitrary group. Assistive tech announces each item's position from the list itself.
• The current page carries aria-current="page".
• Separators are role="presentation" and aria-hidden. The list already conveys the structure, so an announced chevron between every pair of items would be pure noise.

API reference#

The breadcrumb parts add no props of their own — each is a thin, styled wrapper around a native element, and every attribute passes straight through: