Components

Breadcrumb

Displays the path to the current resource using a hierarchy of links. Ancestors are links; the final item is the current page, rendered non-interactively with aria-current.

Preview

Rendered with live Cognition tokens: link, hover, and current-page colors remap on theme change, no dark: classes.

Separators

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

<BreadcrumbSeparator>
  <Dot />
</BreadcrumbSeparator>

<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger className="flex items-center gap-1">
      <BreadcrumbEllipsis />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuItem>Documentation</DropdownMenuItem>
      <DropdownMenuItem>Foundations</DropdownMenuItem>
      <DropdownMenuItem>Components</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

The default separator is a chevron; pass any icon as BreadcrumbSeparator children to swap it. When a path is too deep, collapse the middle into a BreadcrumbEllipsis menu: open the last example to see the hidden levels.

States

<BreadcrumbLink href="…">…</BreadcrumbLink>

<BreadcrumbPage>…</BreadcrumbPage>

Links sit at text-subtle and lift to text-default on hover. The current page uses BreadcrumbPage: solid text-default, not a link, carrying aria-current="page".

API

Part

Description

Breadcrumb

Root <nav aria-label="breadcrumb">. Wraps the whole trail.

BreadcrumbList

The ordered list. Flex-wraps, muted text, gap between items.

BreadcrumbItem

A single level: wraps a link, a page, or the collapsed menu.

BreadcrumbLink

An interactive ancestor link. asChild lets you pass a router Link.

BreadcrumbPage

The current page: non-interactive, aria-current="page".

BreadcrumbSeparator

Decorative divider between items. Defaults to a chevron; pass children to override.

BreadcrumbEllipsis

Collapsed indicator for hidden levels. Wrap in a menu trigger to reveal them.

Don't and Do

Don't

Don't make the current page a link, and don't use a breadcrumb as primary navigation: it reflects hierarchy, it doesn't replace a nav. The last item is a BreadcrumbPage, not a BreadcrumbLink.

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

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

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

API matches fe-distillery/components/ui/breadcrumb.tsx Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis. The raw muted-foreground / foreground colors are replaced with Cognition tokens.