Route Tree Explorer

ProNew

A tree of app routes with page, layout, loading and route-handler chips and a switch that shows pages only. Use this when developers explore a file-based routing structure and need to see what is served where.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it for developer tools, route inspectors and documentation of file-system routers.

Do not use it for an end-user sitemap (use tree-nav) or for routes defined in code rather than folders.

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
`routes`	`TreeNode<RouteData>[]`	-	Segments as folders, served files as leaves with `data.kind`.
`defaultExpanded`	`string[]`	`[]`	Open segments.
`onSelect`	`(file) => void`	-	Enter on a file.

Accessibility

The switch has a visible label and is a real role="switch".
Each chip is text inside the row, so the kind is part of the row's accessible name.
Pruning keeps the tree consistent: a folder with no served file disappears.

Testing

The pattern ships with a Testing Library test (route-tree-explorer.test.tsx) that covers the chips, the filter switch and the removal of empty folders.

Guide and examples

When to use it

Use it for developer tools, route inspectors and documentation of file-system routers.

Do not use it for an end-user sitemap (use tree-nav) or for routes defined in code rather than folders.

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
`routes`	`TreeNode<RouteData>[]`	-	Segments as folders, served files as leaves with `data.kind`.
`defaultExpanded`	`string[]`	`[]`	Open segments.
`onSelect`	`(file) => void`	-	Enter on a file.

Accessibility

The switch has a visible label and is a real role="switch".
Each chip is text inside the row, so the kind is part of the row's accessible name.
Pruning keeps the tree consistent: a folder with no served file disappears.

Testing

The pattern ships with a Testing Library test (route-tree-explorer.test.tsx) that covers the chips, the filter switch and the removal of empty folders.