Liftoff Tab Bar

Features

• Four labelled destinations — Home, Explore, Alerts, Profile — around a raised centre action disc
• The action disc crests the bar top edge, ringed by the bar surface so it reads as a separate object, and springs on hover and press
• The disc is an icon-only control, so it rides --icon-buttons-radius clamped to a circle, and a squarer system renders it as a rounded square rather than a forced disc
• Destination icons spring up and thicken their stroke as they take selection
• The disc fill resolves to the system selection fill with the paired selection ink, so its glyph clears contrast on every roster system
• Roving tabindex with Arrow/Home/End key navigation over the destinations, and aria-current="page" on the active link
• Fully respects prefers-reduced-motion

Accessibility

Navigation landmark

<nav aria-label="Primary"> wraps the slot list

Current slot

aria-current="page" on the active link

Decorative icons

All SVGs marked aria-hidden="true" and focusable="false"

Focus indicators

:focus-visible outlines on every link and control, never composed into a box-shadow list

Keyboard navigation

Roving tabindex with Arrow, Home and End keys

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Liftoff Tab Bar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the navigation 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.