Tab bar

The fixed row of icons at the bottom of a mobile app that switches between its main sections and stays put wherever you are.

the bottom icon bar in appsmobile nav stripbottom navigationthe row of icons at the bottom of the screentabbarapp bottom menuiOS style bottom tabsthumb bar at the bottom

See it

Live demo coming soon

What it is

A tab bar is the fixed strip of icon-plus-label buttons pinned to the bottom of a mobile app, switching between its top-level destinations and staying visible wherever you go. Apple calls it the tab bar (Instagram, Spotify, the App Store); Material Design calls the same thing bottom navigation.

Reach for it when the app has 3 to 5 equally important sections people move between constantly. Native apps usually go further and give each tab its own navigation stack: leave a tab six screens deep, come back, and you land exactly where you left off, and a tap on the already-active tab scrolls to top and then pops to the root. Those are conventions worth copying, not rules the pattern enforces. A web app with one shared history and a bottom bar is perfectly normal, so pick the navigation model on purpose rather than inheriting it by accident.

Gotcha: a tab bar is for destinations, not actions. Cramming a 'compose' or plus button in the middle breaks the mental model, even though half the apps you use do it. Two more: this is not the same as tabs inside a page (those switch panels in one context), and on modern phones you must pad for the home indicator with the bottom safe-area inset or your labels sit under the swipe bar.

Ask AI for it

Build a mobile tab bar: a fixed bottom strip with 4 items, each a stacked icon over a 10px label, evenly distributed, on a background with a hairline top border and a subtle blur. The active item uses the accent color for icon, label, and a filled icon variant; inactive items use a muted grey with outline icons. Add padding-bottom: env(safe-area-inset-bottom) so it clears the home indicator, give each item a 44px minimum touch target, mark up as a nav with aria-current='page' on the active item, and make a tap on the active tab scroll its view to the top.

You might have meant

tabsnavigation railsidebarfloating action button