Neumorphism UI
Navigation & disclosure@neumorphism-ui/breadcrumb

Breadcrumb

Preserves the native semantics of nav and ol while composing links, the current page, separators, and collapsed paths. The current page is automatically marked with aria-current=page.

@neumorphism-ui/breadcrumb
Registry JSON

Preview

Installation

Installation: breadcrumbnpx shadcn@latest add @neumorphism-ui/breadcrumb

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

Breadcrumb usage code
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API Reference

ComponentPropTypeDefaultDescription
Breadcrumbaria-labelstring"breadcrumb"The accessible name of the path navigation region.
BreadcrumbLinkhrefrequiredstring—The actual URL of a parent location.
BreadcrumbPagechildrenrequiredReact.ReactNode—The current page name, marked with aria-current=page.
BreadcrumbSeparatorchildrenReact.ReactNode"/"A visual separator hidden from assistive technology.

Accessibility

  • 01

    Breadcrumb is a nav labeled with aria-label=breadcrumb, and its path is an ordered ol.

  • 02

    Use BreadcrumbPage instead of a link for the final item so it exposes aria-current=page.

  • 03

    Separator and Ellipsis are decorative and hidden from assistive technology.