Breadcrumb

Stable
WCAG 2.2 evidence
RTL

Shows where the current page sits in the hierarchy and links back to each level. It renders a nav landmark named "Breadcrumb" (translatable) around a React Aria Breadcrumbs ordered list; the last BreadcrumbItem is the current page (aria-current="page"), the others are links in the tab order (WCAG 1.3.1, 2.4.1, 2.4.5, 4.1.2). With maxVisible, long trails collapse their middle levels into an ellipsis menu that keeps every level's name and link. The trail wraps onto further lines on narrow screens (1.4.10); separators mirror in right-to-left layouts. Figma advises against breadcrumbs in flat apps and on mobile, where the top app bar's back button is used instead. Consumer duties: level names that match the page titles, and distinct landmark names when a page has several nav elements.

import { Breadcrumb } from "@nexera-ui/react";

Loading example…

5
examples: 8
props: 3
live controls: 1
platform: 10
WCAG criteria: 2
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

children

separator

isDisabledfalse

Generated code

import { Breadcrumb } from "@nexera-ui/react";

<Breadcrumb />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

Separators and lengths

Figma Separator: chevron or slash, and Length=4 levels.

Loading example…

app.tsx

import { Breadcrumb, BreadcrumbItem } from "@nexera-ui/react";

const separators = ["chevron", "slash"] as const;

export function SeparatorsAndLengths() {
  return (
    <div className="flex flex-col gap-4">
      {separators.map((separator) => (
        <Breadcrumb key={separator} aria-label={`Breadcrumb (${separator})`} separator={separator}>
          <BreadcrumbItem type="home" label="Home" href="#home" />
          <BreadcrumbItem label="People" href="#people" />
          <BreadcrumbItem label="Engineering" href="#engineering" />
          <BreadcrumbItem label="Ayesha Khan" href="#ayesha" />
        </Breadcrumb>
      ))}
    </div>
  );
}

Collapsed

Figma Length=Collapsed: with maxVisible={4} a longer trail keeps Home and the last two levels and puts the middle levels in the ellipsis menu (press it, or focus it and press Enter).

Loading example…

app.tsx

import { Breadcrumb, BreadcrumbItem } from "@nexera-ui/react";

export function Collapsed() {
  return (
    <Breadcrumb separator="chevron">
      <BreadcrumbItem type="home" label="Home" href="#home" />
      <BreadcrumbItem label="People" href="#people" />
      <BreadcrumbItem label="Engineering" href="#engineering" />
      <BreadcrumbItem label="Platform" href="#platform" />
      <BreadcrumbItem label="Ayesha Khan" href="#ayesha" />
    </Breadcrumb>
  );
}

Long trail

A long trail wraps onto a second line instead of overflowing; long level names wrap too.

Loading example…

app.tsx

import { Breadcrumb, BreadcrumbItem } from "@nexera-ui/react";

export function LongTrail() {
  return (
    <div className="max-w-xs">
      <Breadcrumb aria-label="Breadcrumb (long)">
        <BreadcrumbItem type="home" label="Home" href="#home" />
        <BreadcrumbItem label="People and organisation" href="#people" />
        <BreadcrumbItem label="Engineering" href="#engineering" />
        <BreadcrumbItem label="Platform infrastructure" href="#platform" />
        <BreadcrumbItem label="Ayesha Khan" href="#ayesha" />
      </Breadcrumb>
    </div>
  );
}

Right to left

Right-to-left: the trail starts at the right and the separators point left.

Loading example…

app.tsx

import { Breadcrumb, BreadcrumbItem } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <Breadcrumb aria-label="مسار التنقل" maxVisible={4} collapsedLabel="إظهار المستويات المخفية">
      <BreadcrumbItem type="home" label="الرئيسية" href="#home" />
      <BreadcrumbItem label="الموظفون" href="#people" />
      <BreadcrumbItem label="الهندسة" href="#engineering" />
      <BreadcrumbItem label="المنصة" href="#platform" />
      <BreadcrumbItem label="عائشة خان" href="#ayesha" />
    </Breadcrumb>
  );
}

Props 8

Press "Try it" on a card to load that prop into the playground.

children*Nexera

ReactNode

The levels, from the root to the current page: BreadcrumbItem elements. The last one is the current page.

separatorNexera

"chevron" | "slash"

Separator between levels: a chevron (Icon/LuChevronRight) or a slash. Both mirror in right-to-left layouts.

maxVisibleNexera

number

Maximum number of entries to show. When the trail is longer, the first level, an ellipsis menu with the hidden middle levels and the last maxVisible - 2 levels are shown. At least 3. Without it every level is shown and the trail wraps.

collapsedLabelNexera

string

Accessible name of the ellipsis button that opens the hidden levels. Translate it.

isDisabledNexera

boolean

Disables every link of the trail.

onActionNexera

(key: Key) => void

Called with a level's id when a level without href is pressed (for apps that navigate in code).

aria-labelNexera

string

Accessible name of the nav landmark. Name each trail when a page has several navigation landmarks. Translate it.

aria-labelledbyNexera

string

Id(s) of visible element(s) that name the landmark; wins over aria-label.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

7 direct · 3 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.1Bypass BlocksLevel A · tested directly
2.4.3Focus OrderLevel A · tested directly
2.4.4Link Purpose (In Context)Level A · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<Breadcrumb className="shadow-sm" />

Theme studio

Breadcrumb

Try every prop. Copy the code.

Examples 4

Separators and lengths

Collapsed

Long trail

Right to left

Props 8

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components