Breadcrumb

When to UseCopy Anchor Link

• for the top of a page that is under other pages, such as an invoice under its client
• to name the workspace and the current page in the header of an app

When Not to UseCopy Anchor Link

• for the main links of a site, as a Breadcrumb shows one path and not the pages next to it (use a Navigation Menu)
• for the sections of an app (use a Sidebar)
• for the pages of a list (use Pagination)

AnatomyCopy Anchor Link

BreadcrumbSeparator renders a caret, and its children replace the caret. The list doesn’t add separators, so place a BreadcrumbSeparator between every two items.

BehaviorCopy Anchor Link

The current page has no href.

WrappingCopy Anchor Link

When the items don’t fit on one row, the list wraps, and a separator can start a row. A name wraps between its words.

CollapsingCopy Anchor Link

BreadcrumbEllipsis has no behavior of its own. You choose the levels that it replaces.

ContentCopy Anchor Link

The aria-label of Breadcrumb is labels.breadcrumb.label, which is “breadcrumb” by default. BreadcrumbEllipsis contains labels.breadcrumb.more, which is “More” by default. To translate both, use the Summit Provider.

AccessibilityCopy Anchor Link

A Breadcrumb renders a named nav that contains an ordered list of links. The links are native a elements, so the browser provides their role and their keys.

Roles and LabelsCopy Anchor Link

RequirementsCopy Anchor Link

Use a BreadcrumbPage for the last item, not a link, so that the item has aria-current="page".

InstallationCopy Anchor Link

npx shadcn@latest add @summit/breadcrumb

The CLI also adds @summit/summit-provider.

UsageCopy Anchor Link

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

<Breadcrumb>
    <BreadcrumbList>
        <BreadcrumbItem>
            <BreadcrumbLink href="/clients">Clients</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
            <BreadcrumbLink href="/clients/atelier-brume">Atelier Brume</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
            <BreadcrumbPage>INV-2026-014</BreadcrumbPage>
        </BreadcrumbItem>
    </BreadcrumbList>
</Breadcrumb>;

With a Router LinkCopy Anchor Link

To use a router’s link in place of the a, pass it to render on BreadcrumbLink.

import Link from 'next/link';

<BreadcrumbLink render={<Link href="/clients" />}>Clients</BreadcrumbLink>;

With a Custom SeparatorCopy Anchor Link

To replace the caret, pass the separator as children of BreadcrumbSeparator. In a right-to-left layout, the caret points left, but a separator passed as children isn’t mirrored. See Iconography for the rule.

<BreadcrumbSeparator>/</BreadcrumbSeparator>

Hide a Level on a Narrow ScreenCopy Anchor Link

To hide a level on a narrow screen, add a class to its item and its separator that shows them only from a breakpoint.

<BreadcrumbItem className="hidden md:inline-flex">
    <BreadcrumbLink href="/">Studio Lumen</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator className="hidden md:block" />

Collapse Levels Into a MenuCopy Anchor Link

To collapse levels into a menu, place the ellipsis in the trigger of a Dropdown Menu and set an aria-label on the Button. Pass an a to render on each item so that a click or Enter follows the link.

import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

<BreadcrumbItem>
    <DropdownMenu>
        <DropdownMenuTrigger render={<Button variant="ghost" size="icon-xs" aria-label="Show hidden levels" />}>
            <BreadcrumbEllipsis />
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-40">
            <DropdownMenuItem render={<a href="/clients/atelier-brume" />}>Atelier Brume</DropdownMenuItem>
            <DropdownMenuItem render={<a href="/clients/atelier-brume/invoices" />}>Invoices</DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>
</BreadcrumbItem>;

API ReferenceCopy Anchor Link

The parts accept the props of the elements that they render. BreadcrumbLink also accepts render. See the Base UI useRender documentation for render.