Breadcrumb

Hierarchical navigation showing where you are.
iOS
Android
Web
tsx
<Breadcrumb items={["Projects", "Identity Platform", "Settings"]} />

Props

Breadcrumb

Prop
Description
items
string[]
The trail, ancestor-first. The last entry renders as the current page (plain emphasized text); the rest render as muted links.
chevron
boolean
Separator style (pick one; default is the chevron glyph).
slash
boolean
Separator style (pick one; default is the chevron glyph).
dot
boolean
Separator style (pick one; default is the chevron glyph).
homeIcon
boolean
Leading affordance: prepend a muted home-icon crumb (aria-labelled "Home") before the trail, followed by the separator. Off by default.
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.

BreadcrumbItem

Prop
Description
children
ReactNode
—
current
boolean
Render as the current page: emphasized foreground text, non-interactive.
onPress
(event: GestureResponderEvent) => void
—
style
StyleProp<TextStyle>
Outer layout composition only (width/flex within a parent), never a restyle hook.

Do & Don’t

Current page

Don’t
Projects
/
Identity Platform
/
Settings
Linking the current page implies there's somewhere to go; it's a dead link to itself.
Do
Ancestors are links; the page you're on is plain text at the end of the trail.

Deep paths

Don’t
A fully expanded deep path wraps and competes with the page.
Do
Collapse the middle to an ellipsis; keep the root and the last couple of levels.

Separator

Don’t
Projects
/
Identity Platform
›
Settings
Mixing separators in one trail looks broken.
Do
Pick one separator and use it the whole way.

Home root

Don’t
/
Settings
An icon-only root with no label is unclear to screen readers.
Do
Give the home icon an aria-label so the root is announced.

Chevron

Don’t
Projects
⌄
Identity Platform
⌄
Settings
A down (or back) chevron reads as a dropdown or a back affordance, not progression down the hierarchy.
Do
Point the chevron in the reading direction (right in LTR) so each one means 'drill into the next level'.

Slash

Don’t
Projects
/
Identity Platform
/
Settings
A full-weight, foreground slash competes with the labels and can read as part of a link.
Do
Keep the slash muted and lighter than the text so it reads as a quiet path divider.

Dot

Don’t
Projects
.
Identity Platform
.
Settings
A baseline period looks like a typo or end-of-sentence, not a separator between crumbs.
Do
Use a centered middot (·) so the dot sits between the crumbs and clearly divides them.
← Badge
Button →