Navigation@knitui/components

Breadcrumbs

Breadcrumbs renders a row of navigational crumbs separated by a separator. Children are interleaved with the separator — never trailing. String/number crumbs auto-wrap in themed text; element crumbs (e.g. Anchor) render as-is. The separator is dimmed via the theme ramp. Renders a semantic <nav aria-label="Breadcrumb">.

WebiOSAndroid3 style slots4 own props11 examples

Stories Source Tests Open in Storybook

import { Breadcrumbs } from "@knitui/components";

Playground

Loading playground…

aria-labelAccessible label for the navigation landmark. Defaults to "Breadcrumb".

separatorNode placed between crumbs. Defaults to "/".

separatorMarginInline spacing around each separator. Tamagui token or CSS value.

Playground

<Breadcrumbs
  aria-label="Breadcrumb"
  separator="/"
  separatorMargin="$xs"
/>

Examples

Default Separator

Default separator "/" interleaved between crumbs — never trailing.

Loading example…

Default SeparatorSource Storybook

Custom String Separator

A custom string separator in place of the default "/".

Loading example…

Custom String SeparatorSource Storybook

Custom Element Separator

A React element — such as a unicode glyph — used as the separator.

Loading example…

Custom Element SeparatorSource Storybook

Large Separator Margin

Wider spacing around each separator via a larger token.

Loading example…

Large Separator MarginSource Storybook

String Crumbs

String and number children are auto-wrapped as themed text without extra markup.

Loading example…

String CrumbsSource Storybook

Single Crumb

A single crumb renders without any separator.

Loading example…

Single CrumbSource Storybook

Custom Aria Label

A custom landmark label distinguishes multiple breadcrumb trails on a page.

Loading example…

Custom Aria LabelSource Storybook

Deep Trail

A long trail of crumbs wraps to the next line when space is limited.

Loading example…

Deep TrailSource Storybook

Separator Showcase

Several breadcrumb trails side by side to compare separator styles.

Loading example…

Separator ShowcaseSource Storybook

Styles

Per-slot styles targets individual parts — here the label crumbs and separator.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`children` required	`ReactNode`	—	Crumbs to render; each becomes one breadcrumb.
`aria-label`	`string \| undefined`	`"Breadcrumb"`	Accessible label for the navigation landmark. Defaults to "Breadcrumb".
`disabled` system	`boolean \| undefined`	—
`separator`	`ReactNode`	`'/'`	Node placed between crumbs. Defaults to "/".
`separatorMargin`	`number \| SpaceTokens \| Animated.AnimatedNode \| "safe" \| null \| undefined`	`'$xs'`	Inline spacing around each separator. Tamagui token or CSS value.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`styles` system	`SlotStyles<BreadcrumbsStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element

Style slots

Every part of Breadcrumbs can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`label`	`styles={{ label: { … } }}`
`root`	`styles={{ root: { … } }}`
`separator`	`styles={{ separator: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 496 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.