# Segmented Tabs

> A health dashboard widget with segmented pill tabs for Move, Heart, and Sleep data — featuring SVG activity rings, animated pulse dot, heart-rate range bar, and stacked sleep-stages visualisation.

- Category: Tabs
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Ember Studio
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: segmented, pill
- Page: https://builder.atheros.ai/components/segmented-tabs
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_segmented_tabs/preview-0384a142d225.webp

## Features

- Sliding active highlight that animates with `transform: translateX` for GPU-friendly motion
- Full WAI-ARIA tabs pattern with `role="tablist"`, `role="tab"`, and `role="tabpanel"`
- Roving tabindex so only the active tab is in the tab order
- Arrow, Home, and End keyboard navigation with focus following selection
- Three panels of health metrics that swap on selection
- Per-tab accent hues (Move / Heart / Sleep) that retint the segmented track, sliding pill, headline eyebrow, panels, and goal bar — following the design-system accent when one is applied, with health-colour fallbacks
- Goal progress bar under the panels with per-tab targets (kcal, zone minutes, sleep hours) that animates via `transform: scaleX` on tab change
- Insight tile row (streak, deltas, bests) that swaps content per tab with a soft fade
- Overflow menu (`aria-haspopup="menu"`) with Refresh data, Download CSV, and Copy summary actions — arrow-key roving, Escape to close, focus returned to the trigger
- Move panel: SVG activity rings with hover/click ring highlighting and a rAF count-up of the metric values, plus a per-hour bar chart with hover tooltips
- Heart panel: an SVG sparkline rendered from data with a hover tracker, interpolated read-out dot, and bpm value bubble, plus a stacked time-in-zones bar
- Sleep panel: a hypnogram of the night's stage timeline (lanes, hour gridlines, per-segment tooltips) that re-renders on resize via `ResizeObserver`
- Touch swipe on the panel area to move between tabs, ignoring vertical-dominant gestures so page scrolling is not hijacked
- Height-stable panel area — all panels share one CSS grid cell so the widget never resizes when switching tabs
- Responsive panel that adapts padding down to 280px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Tablist** — `role="tablist"` on the track with an `aria-label`
- **Tabs** — Each tab has `role="tab"`, `aria-selected`, and `aria-controls`
- **Tab panels** — Each panel has `role="tabpanel"`, `aria-labelledby`, and `tabindex="0"`
- **Roving tabindex** — Only the selected tab has `tabindex="0"`; others are `-1`
- **Overflow menu** — Trigger has `aria-haspopup="menu"` and `aria-expanded`; the menu is `role="menu"` with `role="menuitem"` children, and focus returns to the trigger on close
- **Goal progress** — `role="progressbar"` with `aria-valuenow` and a descriptive `aria-valuetext` rewritten per tab
- **Live updates** — `.sg-bottom` is `aria-live="polite"` so per-tab goal and insight changes are announced
- **Decorative graphics** — Rings, sparkline, hypnogram, and icon SVGs are `aria-hidden="true"`; their values are exposed as text
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowRight` — Move selection to the next tab and focus it
- `ArrowLeft` — Move selection to the previous tab and focus it
- `Home` — Jump to the first tab
- `End` — Jump to the last tab
- `Enter` — Activate the focused tab
- `Space` — Activate the focused tab
- `ArrowDown` — Move to the next item in the open overflow menu
- `ArrowUp` — Move to the previous item in the open overflow menu
- `Escape` — Close the overflow menu and return focus to its trigger
- `Tab` — Move focus between the overflow menu trigger, the tablist, and the active panel

## Common questions

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

Segmented 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 Segmented Tabs free?**

Yes. Segmented Tabs is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Segmented Tabs support dark mode?**

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

## Get the code

Preview Segmented 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/segmented-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