Hairline Tab Bar

Features

• Five labelled slots — Home, Search, Projects, Inbox, Profile — each a real 24x24 Tabler icon above a micro label
• A short two-tone rule slides along the bottom edge under the active slot, painted from the accent ink into the selection ink so it keeps a travel even on single-hue systems
• The frame is squared to the system --cards-radius, so a sharp system renders the original 3px corner and a round one softens it
• The rule rides --progress-radius, the rail role, so its cap follows the system
• Idle labels rest in a blended neutral ink; hover previews the selection colour and the active slot takes the readable accent ink at weight 600
• 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 Hairline 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.