BreadcrumbItem

Stable
WCAG 2.2 evidence
RTL

One level of a Breadcrumb trail; use it only inside Breadcrumb. Built on React Aria Breadcrumb (an <li>) and Link: every level is a link in the tab order, and the last level is the current page, exposed with aria-current="page" and not a link to itself (WCAG 1.3.1, 4.1.2). type="home" shows the house icon with a visually hidden name; type="collapsed" is an ellipsis button that opens the hidden levels in a Menu (Enter, Space or the arrow keys open it, Escape closes it). The separator after each level is decorative and mirrors in right-to-left layouts. Keyboard focus shows the ring (2.4.7). The items are 22 px high and keep the 24 px target spacing through the separators (2.5.8). Consumer duties: level names that match the page titles.

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

Loading example…

2
examples: 17
props: 0
live controls: 1
platform: 9
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…

Generated code

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

<BreadcrumbItem />

Examples 1

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

Types

Figma Type: Home (icon with a hidden name), Collapsed (menu of hidden levels), Link, and the current page.

Loading example…

app.tsx

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

export function Types() {
  return (
    <Breadcrumb aria-label="Breadcrumb (types)">
      <BreadcrumbItem type="home" label="Home" href="#home" />
      <BreadcrumbItem
        type="collapsed"
        items={[
          { label: "People", href: "#people" },
          { label: "Engineering", href: "#engineering" },
        ]}
      />
      <BreadcrumbItem label="Platform" href="#platform" />
      <BreadcrumbItem label="Ayesha Khan" href="#ayesha" />
    </Breadcrumb>
  );
}

Props 17

typeNexera

"link" | "home" | "collapsed"

Figma Type.

labelNexera

VisibleContent

Visible label: the page title of the level ("People"). It names the link and wraps instead of truncating. The last item of the trail is the current page. Accessible name of the icon-only link ("Home"), rendered as visually hidden text. Translate it. Accessible name of the ellipsis button, which opens the menu of hidden levels. Translate it.

itemsNexera

readonly BreadcrumbCollapsedLevel[]

The hidden levels, in order. Breadcrumb fills this itself when it collapses the trail through maxVisible.

onActionNexera

(key: Key) => void

Called with the level's id when a hidden level without href is chosen in the menu.

classNameNexera

string

Extra classes for the list item (<li>), merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style of the list item.

idReact Aria

Key

A unique id for the breadcrumb, which will be passed to onAction when the breadcrumb is pressed.

aria-labelReact Aria

string

Defines a string value that labels the current element.

aria-labelledbyReact Aria

string

Identifies the element (or elements) that labels the current element.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

hrefReact Aria

string

A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).

hrefLangReact Aria

string

Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).

targetReact Aria

HTMLAttributeAnchorTarget

The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

relReact Aria

string

The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).

downloadReact Aria

string | boolean

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).

pingReact Aria

string

A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).

referrerPolicyReact Aria

"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"

How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).

* 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

6 direct · 3 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · supporting test
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.4Link Purpose (In Context)Level A · tested directly
2.4.7Focus VisibleLevel AA · 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:.

data-current
data-disabled
data-hovered

Usage

<BreadcrumbItem className="data-current:opacity-90 shadow-sm" />

Theme studio

BreadcrumbItem

Try every prop. Copy the code.

Examples 1

Types

Props 17

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components