Collapse-All Navigation

ProNew

A navigation tree with Expand all, Collapse all and Reveal current page controls. Use this when a long sidebar leaves people lost after browsing, and one click should restore the view.

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.

currentHref

aria-label

Guide and examples

When to use it

Use it for sidebars deeper than two levels where people open many sections while looking for something.

Do not use it for shallow menus, or when the sidebar already shows only the current section.

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 navigation.
`currentHref`	`string`	-	The current page.
`onNavigate`	`(node, event) => void`	-	A link was activated.
`aria-label`	`string`	`"Navigation"`	Names the navigation.

Accessibility

The three controls are buttons in a labelled toolbar; Expand all and Collapse all are disabled when they would do nothing.
Each action is announced ("All sections collapsed").
The tree keeps its own keyboard model and aria-current on the current page.

Testing

The pattern ships with a Testing Library test (collapse-all-nav.test.tsx) that covers expand all, collapse all, reveal and the initial state.

Guide and examples

When to use it

Use it for sidebars deeper than two levels where people open many sections while looking for something.

Do not use it for shallow menus, or when the sidebar already shows only the current section.

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 navigation.
`currentHref`	`string`	-	The current page.
`onNavigate`	`(node, event) => void`	-	A link was activated.
`aria-label`	`string`	`"Navigation"`	Names the navigation.

Accessibility

The three controls are buttons in a labelled toolbar; Expand all and Collapse all are disabled when they would do nothing.
Each action is announced ("All sections collapsed").
The tree keeps its own keyboard model and aria-current on the current page.

Testing

The pattern ships with a Testing Library test (collapse-all-nav.test.tsx) that covers expand all, collapse all, reveal and the initial state.