# Vertical Tabs

> A data-driven smart-home settings panel styled as an industrial field console — a numbered vertical channel rail with per-tab meta lines, a springy sliding indicator, skeleton loading, custom dropdowns, persisted form state, and full WAI-ARIA keyboard support.

- Category: Tabs
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Tensor
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: vertical, navigation
- Page: https://builder.atheros.ai/components/vertical-tabs
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_vertical_tabs/preview-ae02cdec8d80.webp

## Features

- "Klaxon" design system — chassis-grey dot-grid page floor, near-white instrument plate, graphite ink, and a single signal-orange accent, with Archivo headings, IBM Plex Sans UI copy, and JetBrains Mono readouts
- Vertical channel rail styled like a mixer strip: each tab carries an icon, label, a one-line live meta readout, and a right-aligned mono channel number (`01`–`05`) that flips to signal orange when active
- Sliding plate indicator with a left accent bar, animated purely via `transform: translateY` on a springy overshoot cubic-bezier, plus a ruler tick comb along the rail divider
- Tabs press down with a springy `scale(0.97)` active state
- Full WAI-ARIA tabs pattern with `aria-orientation="vertical"`, roving `tabindex`, and `aria-controls` wiring
- Keyboard navigation tuned for vertical orientation — ArrowUp/ArrowDown to move, Home/End to jump, Enter/Space to activate
- Five smart-home settings sections rendered from `js/data.js` through a field-type renderer (text, select, toggle, range, copy, sessions, keys, plan, danger action)
- Every control is live: `role="switch"` toggles with `aria-checked`, a native range slider with a synced value readout, routine status tags that flip Active/Paused, a copy button that swaps to a checkmark, and a Wi-Fi password Change/Done edit flow
- Danger action uses a two-step confirm — the button arms to "Confirm reset", then clears the network keys from the saved state
- Toast notifications confirm save, export, copy, reset, and routine actions via an `aria-live` region
- Skeleton loading state with a simulated fetch seam (`fetchSettings`) ready to swap for a real API call
- Dirty-state save bar with a pulsing dot, Save and Discard, persisted to `localStorage` and restored on reload
- Compact header toolbar with JSON export and a context menu (copy, reload, reset to defaults)
- Custom dropdown selects with a checkmark on the selected option, outside-click and Escape dismissal
- Dark mode via the `body.dark` class — every semantic alias re-maps in `css/variables.css`
- Responsive layout that stacks the tablist above the panels on narrow screens
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Tablist role** — `role="tablist"` with `aria-orientation="vertical"` on the container
- **Tab roles** — Each tab is a `role="tab"` button with `aria-selected` and `aria-controls`
- **Panel roles** — Each panel is a `role="tabpanel"` with `aria-labelledby` and `hidden` when inactive
- **Roving tabindex** — Active tab has `tabindex="0"`, others `tabindex="-1"`
- **Channel numbers** — Decorative `.vt-tab__num` spans are `aria-hidden="true"` — tab buttons keep clean accessible names
- **Setting toggles** — Rendered as `role="switch"` buttons with `aria-checked`, keyboard-activatable
- **Range slider** — Native `input[type="range"]` labelled via `aria-labelledby` with a live value readout
- **Toast feedback** — `role="status"` region with `aria-live="polite"`
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowDown` — Move focus and selection to the next tab
- `ArrowUp` — Move focus and selection to the previous tab
- `Home` — Jump to the first tab
- `End` — Jump to the last tab
- `Enter` — Activate the focused tab
- `Space` — Activate the focused tab
- `Tab` — Move focus out of the tablist to the active panel

## Common questions

**Which frameworks is Vertical Tabs available in?**

Vertical Tabs ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Vertical Tabs free?**

Vertical Tabs is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Vertical Tabs support dark mode?**

Yes. Vertical Tabs ships light and dark themes, both drawn from the Tensor design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Vertical Tabs live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/vertical-tabs

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt