Breadcrumb

<Breadcrumbs>
  <Breadcrumb href="/">Home</Breadcrumb>
  <Breadcrumb href="/projects">Projects</Breadcrumb>
  <Breadcrumb>HelixUI</Breadcrumb>
</Breadcrumbs>

Install: @helixui/core

import { Breadcrumbs, Breadcrumb } from '@helixui/core'

status: stable · since: 0.1.0

Tags: trail, hierarchy, path

Anatomy

Home › Workspace › Projects › Current page

Layout

display — inline-flex
width — fill
height — content
intrinsicSize — one line, wraps on overflow
stackable — false
fullBleed — false

Visual

A horizontal row of small links separated by a chevron-like glyph. The last item is rendered as plain text (current page) and gets aria-current=page. Truncates with ellipsis when constrained.

Props

Name	Type	Default	Description
`href`	`string`	—	Link target. The last Breadcrumb in the list should omit `href` and renders as `aria-current="page"`.

Slots

Breadcrumbs children — Breadcrumb items
Breadcrumb children — page label

Tokens used

color.text.primary, color.text.secondary, color.text.muted, color.border.focus, radius.sm, space.1, space.2, font.family.sans, font.size.sm, font.weight.medium

Accessibility

Notes

Built on react-aria-components Breadcrumbs — emits a <nav aria-label="Breadcrumbs"> wrapper automatically.
The last item should omit href; helixui renders it as the current page with aria-current="page".

Composes with

Component	Relation	Note
`PageHeader`	`slot`	Common in PageHeader.breadcrumb slot.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

show parent path on a settings page

“breadcrumb Home / Settings / Billing”

<Breadcrumbs>
  <Breadcrumb href="/">Home</Breadcrumb>
  <Breadcrumb href="/settings">Settings</Breadcrumb>
  <Breadcrumb>Billing</Breadcrumb>
</Breadcrumbs>