Components

Breadcrumb

Path of clickable segments separated by CaretRight chevrons. Used inside chrome (like TopBar) to show location and let the user navigate up. Compound API: BreadcrumbList + Item + Link + Separator + Page + Ellipsis.

Updated Jul 17, 2026 by Juan Pablo Turina

Anatomy

1
Breadcrumb (nav)
The <nav aria-label='breadcrumb'> landmark wrapping the whole trail.
2
BreadcrumbList (ol)
Ordered list holding the items and separators. text-sm, muted-foreground, gap-1.5.
3
BreadcrumbLink
A clickable ancestor segment. muted-foreground, hover to foreground, focus ring on keyboard focus.
4
BreadcrumbPage
The current page: text-foreground, aria-current='page', not a link. Only the last crumb.
5
BreadcrumbSeparator
The CaretRight chevron (14px) between segments. Decorative, aria-hidden.
6
BreadcrumbEllipsis
Collapsed middle segments shown as DotsThree (three dots). Wrap in a DropdownMenu to reveal the hidden path.

Variants

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="#">Risk conditions</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="#">Rules</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>r-005</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Recipes

Ready-to-copy compositions covering the most common Yuno usages of this atom.

In a page header

The most common placement: a breadcrumb sitting just above the page title inside chrome (TopBar / PageHeader).

Payment 8f21…

<div className="flex flex-col gap-1">
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem><BreadcrumbLink href="#">Payments</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbPage>Payment 8f21…</BreadcrumbPage></BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
  <h1 className="text-2xl font-bold tracking-tight text-foreground">Payment 8f21…</h1>
</div>

With client-side routing

Pass asChild on BreadcrumbLink to render your router's Link (Next.js) instead of a plain anchor, keeping navigation client-side.

import Link from "next/link";

<BreadcrumbItem>
  <BreadcrumbLink asChild>
    <Link href="/payments">Payments</Link>
  </BreadcrumbLink>
</BreadcrumbItem>

Collapsed path as a menu

When the trail is long, collapse the middle into a BreadcrumbEllipsis wrapped in a DropdownMenu that reveals the hidden segments.

<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger className="flex items-center rounded-sm outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring/50">
      <BreadcrumbEllipsis />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuItem>Operations</DropdownMenuItem>
      <DropdownMenuItem>Disputes</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

Import

Copy this import line at the top of the file where you compose this atom.

Compound API — import only the parts you compose.

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

Props

Everything else from the underlying HTML or Radix primitive is forwarded via ...props.

Prop	Type	Default	Description
Breadcrumb	nav props	—	Renders <nav aria-label='breadcrumb'>. Wraps the whole trail.
BreadcrumbLink.asChild	boolean	false	Merge props onto your own element (e.g. Next <Link>) via Radix Slot, keeping navigation client-side.
BreadcrumbLink.href	string	—	Target of an ancestor segment. Standard anchor href.
BreadcrumbPage	span props	—	The current page: renders aria-current='page', not focusable or clickable. Only the last crumb.
BreadcrumbSeparator.children	ReactNode	<CaretRight />	Override the separator glyph. Any svg child is sized to 14px (size-3.5).
BreadcrumbEllipsis	span props	—	Decorative DotsThree (⋯) for collapsed middle segments. Wrap in a DropdownMenu trigger to make it interactive.

When to use

Detail views nested inside a section (Risk conditions › Rules › r-005).
Any page where the parent path matters for wayfinding.

When not to use

Landing pages with no parent path — use a single title.
For step-by-step wizards — use a stepper.

Usage

Only the last item gets text-foreground (BreadcrumbPage).
Every previous segment should be clickable back to its own list.

Don't

Don't use a breadcrumb to switch between sibling tabs — that's what Tabs are for.
Don't show more than 4 visible segments — collapse the middle with BreadcrumbEllipsis.

Cross-links to atoms and patterns you may reach for next.

Dropdown menuWrap the ellipsis or a segment in one to reveal a collapsed or sibling path.
TabsFor switching between sibling views at the same level, not hierarchical wayfinding.
Page headerWhere breadcrumbs usually live inside the chrome.