Components

Breadcrumbs

Shows where the page sits in the hierarchy and lets people step back up. The last level is the current page and isn't a link.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/breadcrumb

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

import { Breadcrumb, BreadcrumbItem } from "@/components/ui/breadcrumb";

<Breadcrumb>
  <BreadcrumbItem href="/" home />
  <BreadcrumbItem href="/accounts">Accounts</BreadcrumbItem>
  <BreadcrumbItem current>Q1 2026 statement</BreadcrumbItem>
</Breadcrumb>

Examples

Your logo

Type = Logo: pass your logo instead of the home icon, and give it a name. Logos never mirror.

Long level

A long level is cut at 160px, and its full name shows in a tooltip on hover or focus, only when it's actually cut.

Collapsed levels

BreadcrumbCollapsed puts the middle levels behind "…" in a menu.

Router links

Pass Next's <Link> as render: it keeps its behavior and takes the level's look.

API reference

Breadcrumb

Prop	Type	Default	Description
`children`	`ReactNode`		The levels, from the top to the current page.

BreadcrumbItem

Prop	Type	Default	Description
`children`	`ReactNode`		Figma's Label: the page's title as it is.
`href`	`string`		Where the level goes.
`render`	`ReactElement`		A router link (`<Link>`) with the level's look.
`current`	`boolean`	`false`	Figma's Current: the page you're on, not a link, with `aria-current="page"`.
`home`	`boolean`	`false`	Type = Icon: the HouseLine icon named "Home". Pass your logo as children for Type = Logo.

BreadcrumbCollapsed

Prop	Type	Default	Description
`items`	`{ label, href }[]`		The collapsed middle levels, in order.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves through the links; the current page isn't one.
`Enter`	Opens the level, or the menu of collapsed levels.
`ArrowDownArrowUp`	Inside the menu: through the collapsed levels.

ARIA

A nav named "Breadcrumb" in the page language, around an ordered ol.
The last level has aria-current="page"; the separators are hidden from screen readers.
The "…" button is named "Show hidden levels" and opens a menu of links.

Arabic and RTL notes

Mirrors

The trail starts on the right, and the separators point left.
The collapsed menu opens under "…" at the inline start.

Does not mirror

The logo and the home icon.

Numerals: Numbers in titles stay as written; use formatNumber for ones you generate.
Arabic typography: body-14 Medium for the levels, Semibold for the current page.
Mixed-direction text: Never hard-code a right-pointing separator: it follows the direction on its own. Put an English name inside an Arabic title in <bdi>.