Breadcrumb-Synced File Tree

ProNew

A tree and a breadcrumb that always show the same location: selecting a row rewrites the path, and choosing a segment selects and reveals that folder. Use this when people need to see and jump along the path of the selected item.

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.

defaultSelected

Guide and examples

When to use it

Use it for file managers, wikis and document trees where the location matters as much as the item.

Do not use it for flat lists, or when the page already has breadcrumbs from the URL (use tree-nav and let the route drive both).

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
`nodes`	`TreeNode[]`	-	The tree.
`defaultExpanded`	`string[]`	`[]`	Open branches.
`defaultSelected`	`string`	-	Row selected at the start.
`onSelectedChange`	`(id) => void`	-	The selected id.

Accessibility

The breadcrumb is a labelled navigation landmark; the current segment has aria-current="page".
Choosing a segment moves focus to the matching tree row, so keyboard users continue from the right place.
Segments are real buttons, in the tab order after the tree's single tab stop is reached in sequence.

Testing

The pattern ships with a Testing Library test (breadcrumb-synced-file-tree.test.tsx) that covers the path, choosing a segment and opening collapsed parents.

Guide and examples

When to use it

Use it for file managers, wikis and document trees where the location matters as much as the item.

Do not use it for flat lists, or when the page already has breadcrumbs from the URL (use tree-nav and let the route drive both).

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
`nodes`	`TreeNode[]`	-	The tree.
`defaultExpanded`	`string[]`	`[]`	Open branches.
`defaultSelected`	`string`	-	Row selected at the start.
`onSelectedChange`	`(id) => void`	-	The selected id.

Accessibility

The breadcrumb is a labelled navigation landmark; the current segment has aria-current="page".
Choosing a segment moves focus to the matching tree row, so keyboard users continue from the right place.
Segments are real buttons, in the tab order after the tree's single tab stop is reached in sequence.

Testing

The pattern ships with a Testing Library test (breadcrumb-synced-file-tree.test.tsx) that covers the path, choosing a segment and opening collapsed parents.