Frosted Tab Bar

Features

• Five labelled slots — Home, Search, Files, Alerts, Profile — each a real 24x24 Tabler icon above a micro label
• A translucent bar with a 12px backdrop blur and a saturating filter floats on its own tinted wash panel, so the glass has something to refract
• A frosted pane slides behind the active slot on a 0.45s curve, edged with an inset light ring
• The wash is a two-point radial mix of the selection fill and the accent over the system scrim, dark enough in both themes for the light ink the glass carries
• The wash frame steps its corner up from the glass radius by the inset, so the two arcs stay concentric on every system
• Roving tabindex with Arrow/Home/End key navigation 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 Frosted 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.