Camaleo
EN · PTGitHub
// preview in
saved for every page

Breadcrumb

Shows where the current page sits in the site's hierarchy and links to each level above it. It is a map of the structure, not a record of where people have been.

Pattern WAI-ARIA BreadcrumbClient componentSource ↗

Installation

Set up Camaleo once (Installation), then import what you need. It has no state and no effects, so it renders on the server too; BreadcrumbLink takes a render prop for your router's link.

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from "@camaleo/react";

Anatomy

A nav landmark around an ordered list. Each level is an item; separators are items of their own, hidden from screen readers, and the last item is the current page.

Examples

Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.

minimal · light · #3fa34d

Running shoes

148 productsFree shipping over $80

Category path

Mirror the catalog tree, so someone who landed on a category from a search can go up a level and browse its neighbors.

Permissions

Settings path

Deep settings screens are easy to get lost in. The trail ends with the page's own heading, which repeats it as the title.

Budget.xlsx

Edited on 03/14/2026 by Ana Ribeiro

Collapsed middle levels

Press the … button. Keep the first level and the last two in view and put the rest in a Menu opened by a BreadcrumbEllipsis; its name says how many levels it hides.

Office lease 2026.pdf

Signed on 02/01/2026 · 12 pages

With icons

A house alone means nothing to a screen reader. Give an icon-only link a name with VisuallyHidden, and mark every icon aria-hidden.

Annual brand guidelines refresh and asset migration

Long labels

Clip a long name on screen with an ellipsis, never in the text: screen readers still read the whole name, and the heading below shows it in full.

checkout.tsx

128 lines · last commit 2 days ago

Slash separators

Every separator holds a chevron and a slash. Set --cml-crumb-chevron: none and --cml-crumb-slash: inline for file paths, where the slash is the convention.

With the Next.js link

render={<NextLink href="…" />} keeps client-side navigation and prefetching, and the link keeps its slot, its style and its focus ring.

Pegasus 41 Road Running Shoe$139.99

On a phone

The list wraps to a second line instead of scrolling sideways. When it would take three lines, collapse the middle levels.

In context

These are whole pieces of UI you can copy, in the skin you picked.

New color

Pegasus 41 Road Running Shoe

$139.99or 4 payments of $35.00
Product pageBreadcrumb · Badge · Button · Card
File browserBreadcrumb · Table · Link · Badge

Invoice details

Invoices go out on the 1st of every month.

Settings formBreadcrumb · Field · Input · Button

Guidelines

DoShow where the page lives.

The same order is always under Orders, however people got to it.

Don’tShow the pages people visited.

That is what the Back button is for. A trail that changes with every visit can't teach the structure.

Refunds

DoEnd with the current page, as text.

BreadcrumbPage says "you are here" with aria-current="page" and isn't a link to itself.

Don’tMake the current page a link.

It looks like somewhere else to go, and following it only reloads the same page.

Props

PropTypeDefaultDescription

BreadcrumbItem, BreadcrumbPage and BreadcrumbSeparator take the props of their li, span and li. BreadcrumbLink takes the props of an a, plus render to use your router's link instead. BreadcrumbEllipsis stands for collapsed levels: alone it is an image named "More pages"; with render={<button type="button" />}, as a menu's trigger, it is a button. Pass aria-label to say how many levels it hides.

Styling hooks

Restyle it without forking: target the slots, or set the tokens on a parent, a skin or the breadcrumb itself.

Attributes

aria-current"page" on breadcrumb-page
--cml-crumb-chevronblock · none
--cml-crumb-slashnone · inline

Tokens it reads

Color

--cml-fg--cml-fg-muted--cml-focus-offset--cml-focus-ring--cml-focus-width

Shape & size

--cml-font-size-field

Type & motion

--cml-font-control--cml-font-weight-control

This component only

--cml-crumb-slash
/* slashes instead of chevrons in the file browser */
.files [data-slot="breadcrumb"] {
  --cml-crumb-chevron: none;
  --cml-crumb-slash: inline;
}

Accessibility

TabMoves to the next link in the trail. The current page and the separators are skipped.
EnterFollows the focused link.
Enter / Space / Arrow DownOn a collapsed … button, opens the menu of hidden levels with the first one focused.
Arrow DownIn that menu, moves to the next level.
EscapeCloses that menu and returns focus to the … button.
LinkInline and standalone links, with your router.MenuHolds the levels a long trail collapses.PaginationMoves through the pages of one long list.
Was this page helpful? · Edit this page on GitHub