Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProThe desktop settings dialog with a navigation list on the left, aria-current on the open page, arrow-key movement, a page heading that takes focus and a row layout on narrow screens.
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.
Use this for app settings with five to eight sections that each hold a short form.
Do not use it for settings that need their own URL or more than a screen of content per page: use a settings route.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | - | Opens the dialog. |
pages | { id, label, content }[] | - | Sections. |
title | string | Settings | Dialog and navigation name. |
nav with the same name and marks the open page with aria-current="page".sm breakpoint.| Key | Action |
|---|---|
| ArrowDown / ArrowUp in the list | move (wraps) |
| Enter or Space | opens a page |
| Escape | closes |
The pattern ships a Testing Library test (dialog-settings-sidebar.test.tsx) that covers the titled dialog and navigation, switching with focus, arrow keys and starting on the first page.