Home
Click Search. The floating row of icons is the tab bar
Bottom Navigation (Tab Bar)
/ UITabBar · TabView /
also called tab bar, bottom tab bar, bottom nav, bottom tabs, bottom navigation bar, navigation bar (Material 3), mobile nav bar
“The glass thing at the bottom of my iOS apps that has like 4 or 5 options” is a tab bar on iOS (UITabBar, SwiftUI TabView) and a navigation bar in Material 3 (Compose NavigationBar); web and React Native developers usually say bottom navigation or bottom tabs. It is a fixed row of three to five destinations, each an icon with a short label, and tapping one swaps the whole screen above it while the bar stays put. One tab is always selected and tinted, and any tab can carry a badge. It is not a bottom sheet (a panel that slides up over the screen), not a toolbar (actions on the current screen rather than places to go), and not web Tabs, which switch one region inside a page.
If you called it…
…you meant a bottom navigation (tab bar).
Anatomy — every part, named
- 1Tab bar
UITabBar“The glass thing at the bottom” is the tab bar itself (Material 3: navigation bar): the fixed strip holding every destination, floating and translucent on iOS 26.
- 2Tab item
Tab“One of the icons with a word under it” is a tab item (Compose: NavigationBarItem; UIKit: UITabBarItem): one destination, icon above label.
- 3Selected tab
tabBarActiveTintColor“The one that's colored in” is the selected tab: exactly one item takes the accent tint while the rest stay muted.
- 4Count badge
tabBarBadge“The red number on the corner of an icon” is a count badge (React Navigation: tabBarBadge; SwiftUI: .badge(_:)): how many things are waiting in that section. With no number inside it would be a dot badge.
- 5Safe-area inset
env(safe-area-inset-bottom)“The empty strip under the icons” is the safe-area inset: padding that keeps the tabs clear of the iPhone's swipe-up line, the home indicator.
Prompt — paste into your agent
Build a bottom navigation bar (iOS tab bar: UITabBar / SwiftUI TabView; Material 3 NavigationBar) fixed to the bottom of the screen with four destinations of equal importance, each an icon above a short label. Tint the selected tab and leave the others muted, show a count badge on Inbox (tabBarBadge / .badge(_:)), and switch the screen above without any push animation. On the web, make it a <nav> of links with aria-current="page" on the active one, and pad the bar with env(safe-area-inset-bottom) so the icons clear the iPhone home indicator.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my bottom navigation / tab bar (UITabBar, SwiftUI TabView and Tab, Compose NavigationBar, React Navigation createBottomTabNavigator, env(safe-area-inset-bottom)). Rule out: the icons sitting under the iPhone home indicator because env(safe-area-inset-bottom) resolves to 0 without viewport-fit=cover in the viewport meta tag; a web bar positioned with bottom: 0 inside a 100vh page, so it hides behind mobile browser chrome (use dvh or position: fixed on the viewport); page content scrolling underneath with no bottom padding equal to the bar height plus the inset; more than five destinations, so labels truncate or iOS folds the rest into a More tab; the selected tint applied to the icon but not the label; the active tab marked only by color with no aria-current="page" or selected trait; tabs used for actions (compose, scan) instead of destinations, so a tap navigates nowhere; every tab remounting and losing its scroll position because each switch rebuilds the screen; a keyboard pushing the bar up over the form; a badge clipped by overflow hidden on the icon wrapper. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| UIKit | UITabBar | iOS calls it a tab bar; UITabBarController owns it and swaps the screen above it |
| SwiftUI | TabView | each section is a Tab (iOS 18+); .badge(_:) puts a count on one |
| Jetpack Compose | NavigationBar | Material 3's name for it; each icon is a NavigationBarItem, three to five destinations |
| React Navigation | createBottomTabNavigator() | per screen: tabBarIcon, tabBarLabel, tabBarBadge, tabBarActiveTintColor |
| SwiftUI | tabBarMinimizeBehavior(_:) | iOS 26: the floating glass bar shrinks as you scroll |
| ARIA | aria-current="page" | on the web it is a <nav> of links, with the section you are in marked current |
| CSS | env(safe-area-inset-bottom) | padding that lifts the icons clear of the iPhone home indicator; needs viewport-fit=cover |