Breadcrumb
Also called breadcrumbs, breadcrumb navigation, or breadcrumb trail
A row of links, like Projects / Website / Settings, that shows where a page sits in the site and lets people jump back up a level.
import { Fragment } from 'react';
import { Menu } from '@base-ui/react/menu';
type Crumb = { label: string; href: string };
const MAX_LEVELS = 4;
// A › before every level but the first; the current page stands out.
const TRAIL =
"flex items-center gap-1.5 text-sm text-muted-foreground *:flex *:items-center *:gap-1.5 *:not-first:before:opacity-50 *:not-first:before:content-['›'] [&_[aria-current]]:font-medium [&_[aria-current]]:text-foreground [&_a:hover]:text-foreground";
export function Breadcrumb({ items }: { items: Crumb[] }) {
// Past 4 levels, keep the first and the last two and tuck the rest into a … menu.
const hidden = items.length > MAX_LEVELS ? items.slice(1, -2) : [];
const shown = hidden.length
? [...items.slice(0, 1), ...items.slice(-2)]
: items;
return (
<nav aria-label='Breadcrumb'>
<ol className={TRAIL}>
{shown.map((item, index) => (
<Fragment key={item.href}>
{index === 1 && hidden.length > 0 && (
<li>
<Menu.Root>
<Menu.Trigger
aria-label='Show hidden levels'
className='rounded px-1 hover:bg-muted'
>
…
</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner sideOffset={6} align='start'>
<Menu.Popup className='min-w-40 rounded-lg border bg-background p-1 text-sm shadow-lg outline-none *:block *:rounded-md *:px-3 *:py-1.5 *:outline-none *:data-highlighted:bg-muted'>
{hidden.map((crumb) => (
<Menu.LinkItem key={crumb.href} href={crumb.href}>
{crumb.label}
</Menu.LinkItem>
))}
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
</li>
)}
<li>
{index === shown.length - 1 ? (
<span aria-current='page'>{item.label}</span>
) : (
<a href={item.href}>{item.label}</a>
)}
</li>
</Fragment>
))}
</ol>
</nav>
);
}Add a breadcrumb above the page title that shows the path, for example Projects / Website / Settings. Make every level except the last a link, separate levels with a chevron icon, and when there are more than 4 levels collapse the middle ones into a … button that lists them in a small menu. Use nav aria-label="Breadcrumb" and aria-current="page" on the last item.
Paste into Layerwise or any AI coding tool.
What is Breadcrumb?
A breadcrumb lists the path from the top of a site down to the current page, with a separator such as / or › between levels. Every level except the last is a link. The last one is the page you are on.
Use breadcrumbs wherever content is nested: file browsers, admin dashboards, documentation, and stores with categories. They answer “where am I?” at a glance and let people climb several levels in one click. A site with only a handful of top-level pages can skip them.
When the path gets long, keep the first and last levels visible and collapse the middle ones into an ellipsis (…) that reveals them on click. Wrap the trail in <nav aria-label="Breadcrumb"> and mark the current page with aria-current="page" so screen readers announce it.
Often confused with
- Stepper
- A stepper tracks progress through the steps of one task in a fixed order. A breadcrumb shows where a page sits in the structure of a site.
Related terms
All termsSidebar
A vertical panel along the side of an app that holds the main navigation, often collapsible to a slim strip of icons.
Tabs
A row of labels that switches between panels of related content in the same spot, showing one panel at a time.
Dropdown menu
A list of actions that drops down from a button when you click it, then closes as soon as you pick one.
Sticky header
A top bar that stays pinned to the top of the screen while the page scrolls underneath it, so navigation is always one click away.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.