Breadcrumb

Minimal uppercase breadcrumbs with wide tracking and a subtle primary spine. Designed to sit inside cards or muted panels without introducing extra backgrounds.

Default trail

Console Navigation

Breadcrumbs inherit the surrounding surface and use a slim accent divider to highlight the active segment.

Collapsed trail

Ellipsis retains spacing and typography so long paths stay balanced in compact headers.

Installation

pnpm dlx shadcn@latest add @omni/breadcrumb

Usage

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Dashboard</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Provisioning</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>