Navigation

Tree

The tree is for hierarchies deep enough that a flat list would misrepresent them: file systems, nested pages, org structures. Parents carry an always-visible chevron that rolls a quarter turn, leaves keep the same alignment slot so every label stays on one spine, and each level hangs off a hairline guide. Row actions hide behind a handle that stays invisible until the row is hovered, so a deep tree reads as labels rather than as a column of buttons.

npx shadcn@latest add @minflow/tree

Where to use it

Sidebars for file browsers, page hierarchies, and nested settings.
Structures three or more levels deep, where expanding and collapsing is how the user keeps their place.
Never for a flat set of destinations; a plain list or a tab bar says that with less machinery.

Variations

Open on a selection

The usual first render. The branches leading to the selected node are already expanded, so the user can see where they are without clicking.

Closed at rest

For a large tree, where expanding everything would bury the top level. The user opens only the branch they are after.

With row actions

When each node has actions of its own. The handle fades in on hover and stays put while its menu is open, so the row cannot slip away.