Components
Settings section selector
Reuse a centered disclosure of navigation links for account configuration.
On this page
Purpose and composition
Reuse a centered disclosure of navigation links for account configuration.
Use for settings navigation, not form value selection.
Anatomy
| Part | Responsibility |
|---|---|
| Trigger | Active section icon and label |
| Popup | Links with current-page state |
| Content | Selected settings section |
Configuration and variants
| Input / variant | Contract |
|---|---|
| items | id, label, icon and href |
| activeId | Falls back to first item |
| label | Navigation accessible name |
| sections | Appearance, Billing, Signatures, Companies, Products, Email domains, Inboxes, Integrations |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Open | Anchored max-width 288px popup |
| Selected | Contrasting link and check icon |
| Empty items | No selector |
Interaction and responsive behavior
- Outside pointer/Escape close.
- Link selection closes menu and uses scroll=false.
- Reuses queue visual language without queue counts.
Accessibility contract
- Nav label names section links.
- Active link has aria-current page.
Known implementation limits
No roving menu keyboard model or explicit Escape focus restoration.
Composition example
<CenteredSubnav items={sections} activeId="appearance" label="Settings sections" />Source references
| File | Responsibility |
|---|---|
| components/ui/centered-subnav.tsx | CenteredSubnav |
| components/views/settings-view.tsx | Settings composition |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0