Breadcrumb

The path from a list down to the record being shown, each level a link and the last one the current page.

ui.breadcrumbcomponents/ui/breadcrumb.tsx

Use case

For the AI

Use it at the top of a nested record so a person sees where they are and can go back up a level: Clients, then Bistro Le Marchand, then Inventory Dashboard; or Orders, then order 1042, then its return. It belongs to records two or more levels deep; a top-level page reached from the sidebar needs none.

Use it when

A record sits two or more levels below a list
People arrive on a record from a link and need the way up
The page's title alone does not say which client or project it belongs to

Use something else when

Switching between sections at the same level: Tabs
The tool's main places: Sidebar
Moving through the pages of a long list: Pagination

Examples

Code

Import

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

Usage

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<Link href="/clients" />}>Clients</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink render={<Link href="/clients/bistro-le-marchand" />}>Bistro Le Marchand</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Inventory Dashboard</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Rules

The last item is a `BreadcrumbPage` (it carries `aria-current="page"`), never a link to itself.
Every other level is a `BreadcrumbLink`; in Next it renders the router's link with `render={<Link href="/clients" />}`.
A `BreadcrumbSeparator` goes between items and nowhere else; it draws the chevron and is hidden from screen readers.