codefast/ui

Command Palette

Search for a command to run...

Navigation

Breadcrumb

Hierarchical location trail. Supports custom separators, ellipsis, and asChild links.

Sourcenpm

Install

pnpm add @codefast/ui

Import path

@codefast/ui/breadcrumb

Examples

Anatomy

How the parts compose. Copy this skeleton and fill in the slots.

import {
  Breadcrumb, BreadcrumbList, BreadcrumbItem,
  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
} from "@codefast/ui/breadcrumb";

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

API reference

Props for each part of the component. All native element props are also forwarded.

Breadcrumb parts

Compose the trail from a list of items and separators.

PropTypeDefaultDescription
BreadcrumbLinkReactNode—A navigable ancestor. Use asChild to render a router Link.
BreadcrumbPageReactNode—The current page — not a link; marked aria-current.
BreadcrumbSeparatorReactNode—Visual divider; defaults to a slash, override with any icon.

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

  • Renders a nav landmark labelled “breadcrumb”.
  • BreadcrumbPage carries aria-current="page" for the final crumb.
  • Separators are decorative and hidden from assistive tech.

Guidelines

Conventions that keep usage consistent across an app.

Do

  • Reflect the real page hierarchy, ending in the current page.
  • Collapse long trails with an ellipsis on small screens.

Don’t

  • Don’t make the current page a link.
  • Don’t use breadcrumbs as primary navigation.