Skip to content
garn

Breadcrumb

Shows the current page's place in the hierarchy with links back to its ancestors.

Stablev0.4.2added in v0.1.0@garn/ui/breadcrumb
On this page

Default

Home / Components / current page.

Installation

garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.

terminal
npx garn-ui add breadcrumb
First time? Set up garn in your project
Registry
breadcrumb
Deps
@radix-ui/react-slotlucide-react
Registry deps
utils

Import

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from "@garn/ui/breadcrumb";

Anatomy

The parts this component is built from — compose them to assemble it.

BreadcrumbRequired[data-slot="breadcrumb"]

The <nav aria-label="breadcrumb"> landmark.

BreadcrumbListRequired[data-slot="breadcrumb-list"]

The ordered list of crumbs (wraps + collapses gracefully).

BreadcrumbItemRequired[data-slot="breadcrumb-item"]

One crumb (a list item).

BreadcrumbLink[data-slot="breadcrumb-link"]

A link to an ancestor; asChild to wrap a router Link.

BreadcrumbPage[data-slot="breadcrumb-page"]

The current page — NOT a link (aria-current="page").

BreadcrumbSeparator[data-slot="breadcrumb-separator"]

Decorative divider between crumbs (defaults to a chevron); aria-hidden.

BreadcrumbEllipsis[data-slot="breadcrumb-ellipsis"]

Collapsed-middle indicator for long trails; aria-hidden with an sr-only label.

Props

The component's public props and their types.

No component-specific props — this is a thin wrapper over its native element.

Styling

Target these data-slots and states, and remap these tokens, to restyle without forking the component.

[data-slot="breadcrumb"]
PropertyTokenTier
itemGap--garn-gap-fieldsemantic · air
ellipsisSize--garn-control-h-smsemantic · air

When to use

Show where the current page sits in a hierarchy and let users jump to an ancestor.

Reach for something else when

  • A flat site with no hierarchy
  • the primary navigation (use a nav menu or tabs)
  • steps in a linear flow (use a stepper).

Overview

Breadcrumb shows where the current page sits in a hierarchy and lets users jump back to an ancestor. Breadcrumb is the nav landmark, BreadcrumbList the ordered trail, BreadcrumbLink each ancestor link (asChild to wrap a router Link), and BreadcrumbPage the current page — rendered as text with aria-current, not a link. It's a secondary wayfinding aid for deep hierarchies; for primary navigation use NavigationMenu, and for a multi-step task use a Stepper.

Guidelines

Use breadcrumbs only for genuine hierarchy. They earn their place when pages nest several levels deep; on a flat site they're noise. Mirror the real structure, root to current, so the trail matches how users got there.

The last crumb is the page, not a link. Render the current location as BreadcrumbPage (non-interactive, aria-current="page") and make every ancestor a working link. Keep labels short and consistent with the page titles.

Collapse long trails gracefully. When the path is deep, truncate the middle into an ellipsis/menu rather than wrapping across lines, while keeping root and current visible. Keep it a supporting aid — don't make it the only way to navigate up.

Best practices

Do
  • Mark the current page with BreadcrumbPage (it sets aria-current="page").
  • Wrap your router's Link with BreadcrumbLink asChild for client navigation.
  • Collapse long trails with BreadcrumbEllipsis instead of wrapping to many lines.
Don't
  • Don't make the current page a link.
  • Don't use breadcrumbs as the only navigation.
  • Don't add a separator as a real list item — it's decorative.

Content guidelines

  • Use each crumb's real page title, shortened consistently when it's long.
  • Keep the current page as plain text, phrased the same way as the page's own title.

Accessibility

Role
navigation
ARIA APG
breadcrumb

Keyboard

TabMove between the ancestor links.
A1.3.1Info and RelationshipsAAA2.4.8LocationA4.1.2Name, Role, Value
  • The root <nav> is labeled "breadcrumb" so it's a distinct landmark.
  • The current page is BreadcrumbPage (aria-current="page"), not a link.
  • Separators and the ellipsis are aria-hidden / role=presentation — they're decorative.