Tree Nav

ProNew

Site or docs navigation as a tree: a nav landmark whose rows are links, with aria-current on the page, branches opened to it and optional badges.

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 documentation and settings sidebars that have more than two levels.

Do not use it for one or two levels (a list of links or an accordion is simpler) or for in-page selection (use tree-view).

Installation


pnpm dlx shadcn@latest add @tealmac-pro/tree-nav

It uses tree-view, which the CLI installs for you.

Usage

Props

Prop	Type	Default	Description
`nodes`	`TreeNode[]`	-	Rows with an `href` are links; the others only open and close.
`currentHref`	`string`	-	The page being shown.
`aria-label`	`string`	-	Required name of the landmark.
`onNavigate`	`(node, event) => void`	-	Click on a link row. Call `preventDefault` to route on the client.
`renderBadge`	`(row) => ReactNode`	`node.data.badge`	Content after the name.
`navClassName`	`string`	-	Class for the `<nav>`.

Accessibility

The component is a <nav> with a label; the rows inside are links with role treeitem, as in the ARIA navigation treeview.
The current page has aria-current="page"; its parents open on load and when the page changes.
Clicking the chevron toggles without following a link.

Keyboard

ArrowUp / ArrowDown: move between rows. ArrowRight / ArrowLeft: open or close a branch, or move into or out of it.
Enter: follow the link; on a branch without a link, open or close it.
Type a letter to jump. Home / End: first or last row.

Motion respects prefers-reduced-motion: the only animation is the loading spinner, which is switched off. Layout uses logical properties, so the component works in right-to-left languages.

Testing

The component ships with a Testing Library test (tree-nav.test.tsx) that covers its keyboard paths, roles and states.

Guide and examples

When to use it

Use it for documentation and settings sidebars that have more than two levels.

Do not use it for one or two levels (a list of links or an accordion is simpler) or for in-page selection (use tree-view).

Installation


pnpm dlx shadcn@latest add @tealmac-pro/tree-nav

It uses tree-view, which the CLI installs for you.

Usage

Props

Prop	Type	Default	Description
`nodes`	`TreeNode[]`	-	Rows with an `href` are links; the others only open and close.
`currentHref`	`string`	-	The page being shown.
`aria-label`	`string`	-	Required name of the landmark.
`onNavigate`	`(node, event) => void`	-	Click on a link row. Call `preventDefault` to route on the client.
`renderBadge`	`(row) => ReactNode`	`node.data.badge`	Content after the name.
`navClassName`	`string`	-	Class for the `<nav>`.

Accessibility

The component is a <nav> with a label; the rows inside are links with role treeitem, as in the ARIA navigation treeview.
The current page has aria-current="page"; its parents open on load and when the page changes.
Clicking the chevron toggles without following a link.

Keyboard

ArrowUp / ArrowDown: move between rows. ArrowRight / ArrowLeft: open or close a branch, or move into or out of it.
Enter: follow the link; on a branch without a link, open or close it.
Type a letter to jump. Home / End: first or last row.

Motion respects prefers-reduced-motion: the only animation is the loading spinner, which is switched off. Layout uses logical properties, so the component works in right-to-left languages.

Testing

The component ships with a Testing Library test (tree-nav.test.tsx) that covers its keyboard paths, roles and states.