Settings Navigation with Status

ProNew

A settings navigation tree where each page can show unsaved or error markers and a section adds up the problems of its pages. Use this when settings are many and a problem on a closed section must not stay hidden.

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

Guide and examples

When to use it

Use it for account, workspace and admin settings with several sections that are saved or validated separately.

Do not use it for settings that save instantly (nothing is ever unsaved) or for fewer than five pages.

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<PageStatus>[]`	-	Pages with `data: { errors?, unsaved? }`.
`currentHref`	`string`	-	The current page.
`onNavigate`	`(node, event) => void`	-	A page was chosen.

Accessibility

The error count and unsaved dot are included in the row's accessible name ("Payment, 2 errors").
Colour is never the only signal: the count is text, the dot has a spoken equivalent.
The current page has aria-current="page".

Testing

The pattern ships with a Testing Library test (settings-nav-with-status.test.tsx) that covers the roll-up into closed sections, a page's own markers and their spoken names.

Guide and examples

When to use it

Use it for account, workspace and admin settings with several sections that are saved or validated separately.

Do not use it for settings that save instantly (nothing is ever unsaved) or for fewer than five pages.

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<PageStatus>[]`	-	Pages with `data: { errors?, unsaved? }`.
`currentHref`	`string`	-	The current page.
`onNavigate`	`(node, event) => void`	-	A page was chosen.

Accessibility

The error count and unsaved dot are included in the row's accessible name ("Payment, 2 errors").
Colour is never the only signal: the count is text, the dot has a spoken equivalent.
The current page has aria-current="page".

Testing

The pattern ships with a Testing Library test (settings-nav-with-status.test.tsx) that covers the roll-up into closed sections, a page's own markers and their spoken names.