Skip to content

Breadcrumb

Where this page sits. On a phone only the parent link shows; long trails collapse into a menu.

Sourcecomponents/breadcrumb.tsx

Usage

Breadcrumb usage
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/breadcrumb";
export function BreadcrumbUsage() {  return (    <Breadcrumb>      <BreadcrumbList>        <BreadcrumbItem>          <BreadcrumbLink href="/">Home</BreadcrumbLink>        </BreadcrumbItem>        <BreadcrumbSeparator />        <BreadcrumbItem>          <BreadcrumbLink href="/projects">Projects</BreadcrumbLink>        </BreadcrumbItem>        <BreadcrumbSeparator />        <BreadcrumbItem>          <BreadcrumbPage>Checkout redesign</BreadcrumbPage>        </BreadcrumbItem>      </BreadcrumbList>    </Breadcrumb>  );}

When to use

Use when

Showing where a page sits in a hierarchy, two or more levels deep. On a phone it shows the parent link only, so keep BreadcrumbPage last. Renders on the server; import BreadcrumbEllipsis from components/breadcrumb-ellipsis.tsx for a long trail. render={<NextLink href="…" />} on BreadcrumbLink routes with your framework

Don’t use when

Flat sites; a substitute for the page title