Vertical Tabs

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

Customise it with AI

Open Vertical Tabs in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the tabs is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.