Breadcrumb

Atom
Hierarchical navigation showing where you are.
src/atoms/breadcrumb
View in Navigation

Playground

Every control sets a real prop of BreadcrumbProps. The JSX below updates as you go.
Props
Separator
pick one
homeIcon
boolean
maxItems
number
0
JSX · BreadcrumbProps
<Breadcrumb chevron maxItems={0} />

Variants

3 examples from src/atoms/breadcrumb/breadcrumb.md, each rendered live from its own JSX.
Slash
<Breadcrumb items={["Projects", "Identity Platform", "Settings"]} slash />
Dot
<Breadcrumb items={["Projects", "Identity Platform", "Settings"]} dot />
Home icon
<Breadcrumb items={["Projects", "Identity Platform", "Settings"]} homeIcon />

Anatomy

1
Trail
2
Crumb
3
Separator
4
Current page
Dimmed parts appear only in some states or variants.

Props

10 props on BreadcrumbProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
1 prop
items
string[]
–
The trail, ancestor-first. The last entry renders as the current page (plain emphasized text); the rest render as muted links.
Separator style
pick one
9 props
chevron
boolean
false
slash
boolean
false
dot
boolean
false
homeIcon
boolean
false
Leading affordance: prepend a muted home-icon crumb (aria-labelled "Home") before the trail, followed by the separator. Off by default.
subtle
boolean
false
A quieter trail for a page header: the ancestors (and the home glyph) in the subtle ink and the current page at the regular weight, so the trail recedes under the title.
maxItems
number
–
Collapse a long trail: when the trail has more than maxItems crumbs, keep the first crumb and the last maxItems - 1 (so maxItems crumbs in all), and replace the middle with a single "…" crumb, so a deep path stays on one scannable line. Takes effect from 2.
onItemPress
(item: string, index: number) => void
–
Fired with the crumb label and its index when a link (non-last) is pressed.
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard
Tab
Moves between links
Enter
Follows the link
Semantics
Roles
link
navigation
text
States
selected
ARIA on web
aria-current
aria-hidden
aria-label
Below the platform minimum, the touch area grows to 44 pt on iOS and 48 dp on Android without moving the layout.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Breadcrumb items={["Projects", "Identity Platform", "Settings"]} />

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--tx
--tx2
--tx3

Related components