# Spectrum Tab Bar > A four-slot mobile bottom bar carrying its own palette, where a floating tile slides between destinations and a cresting disc opens the composer. - Category: Navigation - Frameworks: Vanilla, React + CSS, React + Tailwind - Design system: Aperture - Dark mode: yes - Access: premium (Atheros AI Pass) - Tags: tab-bar, bottom-nav, gradient - Page: https://builder.atheros.ai/components/spectrum-tab-bar - Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_spectrum_tab_bar/preview-fa3365c1a770.webp ## Features - Four labelled destinations — Home, Search, Activity, Profile — on a saturated bar that carries its own ink instead of borrowing the page surface - A pale tile floats inside the active slot with an even gap on all four sides and slides between destinations on a 0.45s curve - A cresting disc opens the composer, sized and seated like the tile so the two read as siblings - The bar fill and its ink are the system selection pair, so every label clears 4.5:1 at every point of the bar on all fifteen design systems - Unstamped, the bar renders its authored three-stop ramp; under a design system each stop resolves to that system selection fill - 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** — `