Breadcrumb

The path to the current page as a row of links, with a way to fold long paths.

A breadcrumb shows where a page sits in a hierarchy, as links to each level above it and the current page last. It is a secondary navigation: a reader uses it to go up a level, not to find a page. This site shows one above every title.

A trail, and a long one folded behind a menuClient

Full source examples/ui/breadcrumb.tsx

// apps/docs/examples/ui/breadcrumb.tsx'use client';
import {  Breadcrumb,  BreadcrumbEllipsis,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from '@workspace/active-ui/components/primitives/breadcrumb';import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuItem,  DropdownMenuTrigger,} from '@workspace/active-ui/components/primitives/dropdown-menu';
/** * Where the page sits in its hierarchy, as links to each level and the * current page last. When the trail is long, the middle levels fold behind * an ellipsis that opens a menu with them. The links point to anchors on * this page; in an application they are your routes. */export default function BreadcrumbExample() {  return (    <div className="flex flex-col gap-6">      <Breadcrumb label="Breadcrumb">        <BreadcrumbList>          <BreadcrumbItem>            <BreadcrumbLink href="#breadcrumb-home">Home</BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbLink href="#breadcrumb-schemes">Schemes</BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbPage>Pension scheme 2026</BreadcrumbPage>          </BreadcrumbItem>        </BreadcrumbList>      </Breadcrumb>
      <Breadcrumb label="Breadcrumb, shortened">        <BreadcrumbList>          <BreadcrumbItem>            <BreadcrumbLink href="#breadcrumb-home">Home</BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <DropdownMenu>              <DropdownMenuTrigger                aria-label="Show the hidden levels"                className="flex items-center"              >                <BreadcrumbEllipsis />              </DropdownMenuTrigger>              <DropdownMenuContent align="start" className="w-48">                <DropdownMenuItem render={<a href="#breadcrumb-schemes" />}>                  Schemes                </DropdownMenuItem>                <DropdownMenuItem render={<a href="#breadcrumb-scheme" />}>                  Pension scheme 2026                </DropdownMenuItem>              </DropdownMenuContent>            </DropdownMenu>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbLink href="#breadcrumb-participants">              Participants            </BreadcrumbLink>          </BreadcrumbItem>          <BreadcrumbSeparator />          <BreadcrumbItem>            <BreadcrumbPage>Sam de Vries</BreadcrumbPage>          </BreadcrumbItem>        </BreadcrumbList>      </Breadcrumb>    </div>  );}

Usage#

TSX

import {  Breadcrumb,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from '@workspace/active-ui/components/primitives/breadcrumb';
<Breadcrumb label="Breadcrumb">  <BreadcrumbList>    <BreadcrumbItem>      <BreadcrumbLink href="/schemes">Schemes</BreadcrumbLink>    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <BreadcrumbPage>Pension scheme 2026</BreadcrumbPage>    </BreadcrumbItem>  </BreadcrumbList></Breadcrumb>;

Anatomy#

Breadcrumb: the <nav> landmark, named by label.
BreadcrumbList (<ol>) with a BreadcrumbItem (<li>) per level.
BreadcrumbLink: a link to a level. render makes your router's link the element, for example render={<Link href="/schemes" />} with Next.js.
BreadcrumbPage: the current page, not a link, with aria-current="page".
BreadcrumbSeparator: a chevron between items, its own <li> hidden from assistive technology; pass children for another sign.
BreadcrumbEllipsis: the visible sign for folded levels. It is hidden from assistive technology, so the element that shows the folded levels (a menu trigger, in the example) needs an accessible name of its own.

What your application provides#

label: the name of the landmark, such as "Breadcrumb", in your reader's language (required).
The levels and their links. On a small screen, fold the middle levels rather than wrapping a long trail over several lines.

Accessibility and keyboard#

A <nav> named by label, with an ordered list: screen readers announce the number of levels.
Each level is an ordinary link; the current page is announced as such and is not focusable.

API#

Import from @workspace/active-ui/components/primitives/breadcrumb

Props

Other props, such as the standard attributes of the underlying element, className and ref, are passed through.

Other parts#

Parts that take only their element’s attributes

BreadcrumbList: the attributes of a <ol>, with className and ref.
BreadcrumbItem: the attributes of a <li>, with className and ref.
BreadcrumbLink: the attributes of a <a>, with className and ref, and Base UI's render to use your own element.
BreadcrumbPage: the attributes of a <span>, with className and ref.
BreadcrumbSeparator: the attributes of a <li>, with className and ref.
BreadcrumbEllipsis: the attributes of a <span>, with className and ref.

Based on shadcn/ui

This page adapts the Breadcrumb documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.