Breadcrumb

Where the page sits in the site: the path of links above it, with the current page last.

Installation

npx rasengan-ui add breadcrumb

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/breadcrumb.json

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
 
export function Usage() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Settings</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

A router link

BreadcrumbLink is an <a>; give your router's link in render and it keeps the styles:

import { Link } from "rasengan";
 
<BreadcrumbLink render={<Link to="/docs" />}>Docs</BreadcrumbLink>

Separators and collapsed levels

BreadcrumbSeparator shows a chevron, or its children. BreadcrumbEllipsis stands for levels left out of a long path; put it in a DropdownMenuTrigger to list them, as in the demo at the top.

Villages

The path is in the muted ink and the current page in the foreground, in every village.

Accessibility

• A <nav> landmark named "Breadcrumb" (change it with aria-label), holding an ordered list.
• The current page is not a link and carries aria-current="page".
• Separators are hidden from screen readers; the ellipsis is read as "More pages".

API reference