Persistent Navigation Tree

ProNew

A navigation tree that remembers which sections are open between visits, without breaking when storage is blocked. Use this when people return to the same long sidebar and expect it to look as they left it.

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

storageKey

Guide and examples

When to use it

Use it for app and docs sidebars that stay the same over many visits.

Do not use it to remember anything sensitive, or for state that must follow the person across devices (store that on the server).

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.
`storageKey`	`string`	-	Where to save the open sections.
`defaultExpanded`	`string[]`	`[]`	Used before anything is saved.

Accessibility

Restoring happens after the first render so server and client markup match; nothing moves under the pointer.
Storage is wrapped in try/catch, so a private window or full quota does not break navigation.
The tree keeps its keyboard model and aria-current.

Testing

The pattern ships with a Testing Library test (persistent-nav-tree.test.tsx) that covers saving, restoring, broken stored values and a storage that throws.

Guide and examples

When to use it

Use it for app and docs sidebars that stay the same over many visits.

Do not use it to remember anything sensitive, or for state that must follow the person across devices (store that on the server).

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.
`storageKey`	`string`	-	Where to save the open sections.
`defaultExpanded`	`string[]`	`[]`	Used before anything is saved.

Accessibility

Restoring happens after the first render so server and client markup match; nothing moves under the pointer.
Storage is wrapped in try/catch, so a private window or full quota does not break navigation.
The tree keeps its keyboard model and aria-current.

Testing

The pattern ships with a Testing Library test (persistent-nav-tree.test.tsx) that covers saving, restoring, broken stored values and a storage that throws.