Breadcrumb, Asgard Docs

Navigation & chrome

Show where the user is.

Breadcrumb renders a navigation trail showing the user's current location within a hierarchy.

Key features:

Separators: slash, chevron, dot, dash, arrow, or custom string
maxItems with expandable ellipsis for deep paths
Optional showHome icon and semantic coloring
Variants: default, underline, bold

Loading preview…

When to use it

Deep navigation hierarchies
File and folder paths
Catalog / category drill-downs
Collapsing long trails with maxItems

Properties

Prop	Type	Default	Description
`items`	`BreadcrumbItem[]`	—	Array of breadcrumb items, each with a label and optional href, icon, and onClick.
`size`	`'small' \| 'normal' \| 'large'`	`'normal'`	Controls the font size and spacing of the breadcrumb trail.
`semantic`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'`	—	Semantic color applied to the active breadcrumb links.
`variant`	`'default' \| 'underline' \| 'bold'`	`'default'`	Visual style applied to the breadcrumb links.
`separator`	`'slash' \| 'chevron' \| 'dot' \| 'dash' \| 'arrow' \| string`	`'slash'`	Separator character or preset between breadcrumb items. Pass a custom string for a custom separator.
`maxItems`	`number`	—	Maximum number of visible items before middle items are collapsed into an ellipsis.
`showHome`	`boolean`	`false`	When true, displays a home icon as the first breadcrumb item.

Notes

Each BreadcrumbItem can have a label, optional href for link navigation, optional icon, and optional onClick handler.
When maxItems is set and the item count exceeds it, middle items are collapsed into an ellipsis that can be expanded on click.

Presets