Breadcrumb

Use breadcrumbs to show where the current page sits in a hierarchy.

Breadcrumbs work best for nested products, documentation, settings, folders, and admin sections. They should not replace the main navigation. They help users understand context and move up one or more levels.

A breadcrumb has a list, items, links, separators, and a current page item. Earlier items are usually links. The current item usually is not a link.

Keep labels short. Start with the highest useful parent, not always the site root. Use custom separators only when they still read clearly between items.

Wrap breadcrumbs in navigation with a clear label. Mark the current page so assistive technology can distinguish it from links.

npx honestui@latest add breadcrumb

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

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

The example shows how to change the separator while keeping the same hierarchy.

With custom separator