Underdot Tab Bar

Features

• Five labelled slots — Home, Explore, Projects, Saved, Profile — each a real 24x24 Tabler icon above a micro label
• A small disc marker glides under the active slot on a 0.42s cubic-bezier curve, positioned from measured slot geometry rather than hardcoded offsets
• The disc carries a soft accent halo ring so it reads as a marker rather than a stray dot
• 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
• The bar is a card frame on the system --cards-radius, with a hairline border and the system elevation tier
• 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 Underdot 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.