Breadcrumb

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

Usage

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

BreadcrumbLink uses the text-fg-link token on hover (resting state inherits the muted list colour) — link styling stays scoped to the link slot per the Reva theme. The default separator renders a Lucide ChevronRightIcon, matching the chevron used elsewhere (e.g. DropdownMenuSubTrigger).

Composition

Use the following composition to build a Breadcrumb:

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

Examples

Collapsed

We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.

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

Wrap <BreadcrumbEllipsis /> in a DropdownMenu to expose the collapsed segments. Use IconButton (Reva's icon-only Button) with variant="ghost" and size="xs" for the trigger.

<Breadcrumb>  <BreadcrumbList>    <BreadcrumbItem>      <BreadcrumbLink href="#">Home</BreadcrumbLink>    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <DropdownMenu>        <DropdownMenuTrigger asChild>          <IconButton variant="ghost" size="xs">            <BreadcrumbEllipsis />            <span className="sr-only">Toggle menu</span>          </IconButton>        </DropdownMenuTrigger>        <DropdownMenuContent align="start">          <DropdownMenuGroup>            <DropdownMenuItem>Documentation</DropdownMenuItem>            <DropdownMenuItem>Themes</DropdownMenuItem>            <DropdownMenuItem>GitHub</DropdownMenuItem>          </DropdownMenuGroup>        </DropdownMenuContent>      </DropdownMenu>    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <BreadcrumbLink href="#">Components</BreadcrumbLink>    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>    </BreadcrumbItem>  </BreadcrumbList></Breadcrumb>

Props

Prop	Type	Default	Description
...	...	...	Inherits standard HTML props on each slot (`nav`, `ol`, `li`, `a`, `span`). `BreadcrumbLink` accepts `asChild` for polymorphic composition.