Topline Tab Bar
AI Pass+navigation#tab-bar#social
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Navigation component
About Topline Tab Bar
A floating pill tab bar for a social app: four labelled slots with Tabler icons and a bold accent marker bar that rides the top edge above the active tab. Idle tabs rest muted, the active tab and its icon in the accent, with a springy press.
Features
- Floating rounded white pill with a soft slate shadow and a faint 1px hairline border
- Four slots — Home, Jobs, Messages, and Profile — each a real 24x24 Tabler icon with a label
- Bold cobalt marker bar that rides the top edge and translates above the active tab via nth-child sibling selectors
- Idle tabs in cool slate gray lift to cobalt blue on hover and when active
- Springy
scale(0.97)press feedback on each tab with a cubic-bezier overshoot aria-current="page"tracks the active tab and keyboard activation works through the links- Fully respects
prefers-reduced-motion
Accessibility
- Navigation landmark
<nav aria-label="Primary">wraps the tab list- Current tab
aria-current="page"on the active tab link- Decorative icons
- All SVGs marked
aria-hidden="true"andfocusable="false" - Focus indicators
:focus-visiblewith--ringoutline on links- Keyboard activation
- Enter and Space activate the focused tab link
- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Topline 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.
Explore Other Components
View all
Hairline Tab Bar
ReactVanilla
A squared five-slot mobile bottom bar marked by a short two-tone rule that slides along the bottom edge beneath the active label.
#navigation#tab-bar#bottom-nav
Frosted Tab Bar
VanillaReact
A translucent five-slot mobile bottom bar floating on a tinted wash, where a frosted pane slides behind the active slot.
#bottom-nav#mobile#navigation
Liftoff Tab Bar
VanillaReact
A four-slot mobile bottom bar with a raised centre action disc that crests the bar edge, and destination icons that spring as they take selection.
#navigation#tab-bar#bottom-nav
Expander Tab Bar
ReactVanilla
An icon-only mobile bottom bar where the chosen slot widens into a tinted tab and unfolds its label inline, its neighbours giving way.
#navigation#tab-bar#bottom-nav
Stepper
VanillaReact
A token-driven onboarding stepper with a continuous progress rail, animated number-to-check nodes, a live percentage readout, and a rich per-step content stage that advances real Back/Next state — fully design-system agnostic.
#navigation#stepper#wizard
Mega Menu Header
VanillaReact
A design-system-adaptive developer-platform header: a wordmark, primary navigation, two numbered-index mega-menus, rule-closed promos, a cross-blur reveal, sliding underline, and a focus-trapped mobile drawer.
#navigation#dropdown
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
