Data display / Breadcrumb

Breadcrumb

<Breadcrumb />Stable

Reveals where the user is in a hierarchy. One per page, in the header. The path rests at the quiet --text-body-light tier and lifts to --text-main on hover; the current page sits at --text-main. Leading icons ride currentColor, so they track the same icon-* tier as their label. Separators are swappable, and long paths collapse the middle into a dropdown menu.

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

Variants

Hover any link to see it shift from --text-body-light to --text-main (its icon rides along via currentColor). Default chevron or a custom separator, with or without per-item icons, and a static collapse.

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/recruits">Recruits</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="/recruits/2027">Class of 2027</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Marcus Reed</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Composition

For long paths, collapse the middle crumbs into a dropdown menu built from our DropdownMenu primitive — the ellipsis is the trigger.

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/upnext";


{/* collapse the middle into a menu — keeps long paths to one line */}
<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger className="flex size-6 items-center justify-center rounded-md text-body hover:bg-muted hover:text-main data-[state=open]:bg-muted">
      <BreadcrumbEllipsis />
      <span className="sr-only">Show collapsed crumbs</span>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuItem>Class of 2027</DropdownMenuItem>
      <DropdownMenuItem>Quarterbacks</DropdownMenuItem>
      <DropdownMenuItem>Watchlist</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.