Breadcrumb Trail Select

ProNew

A path chosen in a breadcrumb: every crumb is a menu of its siblings, choosing one cuts the path there and reveals a Choose crumb for the next level. Use this when people pick a location in a hierarchy and want to see and change it at any level.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

Guide and examples

When to use it

Use it for choosing a category, a folder or a place when the path itself is the answer, and jumping back up to change one level should be one click.

Do not use it when people browse a large tree. Use a cascader or a tree.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`tree`	`{ id, label, children? }[]`	-	The hierarchy.
`value`	`string[]`	-	The path of ids (controlled).
`defaultValue`	`string[]`	`[]`	Initial path.
`onValueChange`	`(path: string[], complete: boolean) => void`	-	Runs on every change; `complete` is true when the path ends at a leaf.
`label`	`string`	`Category`	Names the trail.

Accessibility

The trail is a nav named by label containing an ordered list; each crumb is a button with aria-haspopup="menu" named Level 2: Audio. Change.
The menus are radio groups, so the current sibling is marked and Arrow keys, Home, End and typeahead work.
Choosing a sibling announces Path: Electronics, Audio. Choose the next level. or Path complete: ....
A crumb with no choice yet reads Choose and is highlighted as the next step.

Testing

The pattern ships with a Testing Library test (breadcrumb-trail-select.test.tsx) that covers opening a crumb, cutting the path on a change, the Choose crumb and completion.

Guide and examples

When to use it

Use it for choosing a category, a folder or a place when the path itself is the answer, and jumping back up to change one level should be one click.

Do not use it when people browse a large tree. Use a cascader or a tree.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`tree`	`{ id, label, children? }[]`	-	The hierarchy.
`value`	`string[]`	-	The path of ids (controlled).
`defaultValue`	`string[]`	`[]`	Initial path.
`onValueChange`	`(path: string[], complete: boolean) => void`	-	Runs on every change; `complete` is true when the path ends at a leaf.
`label`	`string`	`Category`	Names the trail.

Accessibility

The trail is a nav named by label containing an ordered list; each crumb is a button with aria-haspopup="menu" named Level 2: Audio. Change.
The menus are radio groups, so the current sibling is marked and Arrow keys, Home, End and typeahead work.
Choosing a sibling announces Path: Electronics, Audio. Choose the next level. or Path complete: ....
A crumb with no choice yet reads Choose and is highlighted as the next step.

Testing

The pattern ships with a Testing Library test (breadcrumb-trail-select.test.tsx) that covers opening a crumb, cutting the path on a change, the Choose crumb and completion.