Neumorphism UI

Breadcrumb

Use Breadcrumb to show the current page's place in a hierarchy and provide links to parent pages.

Preview

A path with omitted levels

Combine Components and Navigation links, an ellipsis, and the current Breadcrumb page.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/breadcrumb

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Compose BreadcrumbList with BreadcrumbItem. Use BreadcrumbLink for ancestors and BreadcrumbPage for the current location; place each separator with the following item.

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

export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbPage>Settings</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

API Reference

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.

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.