UI components · Navigation
Bottom Tab Bar
Also called: Bottom navigation, Bottom nav, Bottom tabs, iOS tab bar
A row of 3–5 icons with labels fixed to the bottom of mobile apps and mobile web pages, used to switch between the most important pages.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstAdd a bottom tab bar to this mobile page. Fix it to the bottom of the screen, 56px tall plus env(safe-area-inset-bottom), with a white background and a 1px top divider. Add 4 equal-width entries, "Home, Discover, Messages, Profile," each a 24px outline icon above an 11px label. Switch the current page's icon to the filled version and color its icon and label with the accent color; the rest are gray. Show a red unread-count badge on the top-right of the "Messages" icon. Hide the tab bar on detail pages. Add 72px of bottom padding to the page so content isn't covered, and hide the bar above 768px wide in favor of a navbar.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Bottom Tab Bar is what you need.
Use Bottom Tab Bar when
- Mobile apps or mobile web pages with 3–5 frequently used top-level pages that users switch between all the time
- When users mostly use one hand, so entries need to be at the bottom where the thumb can reach
- When an entry needs to flag unread status like new messages or items in the cart
Pick something else when
Wide desktop pages
More than 5 top-level entries, which won't fit at the bottom. Cut them down or use a drawer menu.
Second-level pages like details or checkout, which should make room for a back button and a bottom action bar
Use insteadBottom Action Bar
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Six or seven entries crammed in, each shrunk to a tiny icon with a cut-off label that's hard to tap
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Icons with no labels, so users have to guess which page each one opens
- 03
The tab bar is fixed to the bottom but the page leaves no room for it, so the last few list items are always hidden
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A horizontal container fixed to the bottom of the screen with 3–5 equal-width entries. Each entry is an icon with a short label, the current one is highlighted, and entries can carry badges.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
The bottom tab bar is the most common main navigation on phones: a row of 3–5 entries at the very bottom of the screen, each an icon with a one-word label, like "Home, Categories, Cart, Messages, Profile." The current page's icon turns solid and its label turns the accent color, while the rest stay gray. When there's something new, a badge appears on the icon's top-right corner. It's where thumbs reach most easily, so users can jump to any main page in one tap.
The name sounds like Tabs, but they work at different levels. Tabs switch between blocks of content inside one page. A bottom tab bar switches between the app's top-level pages, like a mobile version of the Navbar or Sidebar Menu. It and the Bottom Action Bar both sit at the bottom, but the action bar holds buttons for actions like "Submit" or "Buy," not links to pages.
Keep it to 3–5 entries, and give each one a label, not just an icon. It only appears on top-level pages. When users go into second-level pages like details or checkout, hide it and make room for a back button or a bottom action bar. Being fixed to the bottom means it covers content, so add the same height of bottom padding to the page, plus the iPhone safe area. On wide screens, switch to a navbar or sidebar menu.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-bottom-tab-bar- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.van-tabbar.adm-tab-bar.weui-tabbar.nut-tabbar.t-tab-bar[class*="MuiBottomNavigation-root"]ion-tab-barnav.fixed-bottomnav.fixed.bottom-0nav.sticky.bottom-0
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
bottom-tab-barbottom-tabsbottom-navbottom-navigationtab-bartabbar
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
TabBarBottomNavigationBottomNavBottomTabBarBottomTabs
- Semantic tags and roles
A weak signal. It only counts together with other cues.
<nav>
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
fixed bottomrepeated items
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026