Bottom Navigation
底部导航栏
The row of icon buttons pinned to the bottom of an app, switching between 3–5 top-level destinations.
Live Demo
Actually clickableWhat you just saw:WeChat has "Chats / Contacts / Discover / Me" at the bottom; Alipay has "Home / Messages / Ant Forest / My / Cards". Both are bottom navigation.
What it actually is
Bottom navigation is the main menu of a mobile app. It exists because it is thumb-reachable and always one tap away. It holds only the 3–5 highest-frequency destinations, and detail pages should cover it.
Anatomy · What it's made of
Bar容器
Pinned to the bottom, includes safe-area padding
Item导航项
Icon + short label
Active Item选中态
Icon recolored + label darkened
Badge角标
A dot or a count, optional
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The mobile app has 3–5 peer primary features | Yes |
| Users move back and forth between features often | Yes |
| One-handed grip and thumb reachability come first | Yes |
| Desktop web applications | Depends |
| There are more than 6 peer destinations | No |
Past five destinations users start tapping blindly — fold the rest into "More" or a side menu.
Hide it while users are reading or editing immersively, and give the space back to the content.
Similar Patterns
Don't mix these upBottom NavigationCurrent
底部导航栏
The row of icon buttons pinned to the bottom of an app, switching between 3–5 top-level destinations.
Navigation Rail
侧边导航栏
A column of navigation items placed vertically on the left, for layouts with more vertical room than horizontal.
In one line:The row of icon buttons pinned to the bottom of an app, switching between 3–5 top-level destinations.
Navigation Rail
侧边导航栏
A column of navigation items placed vertically on the left, for layouts with more vertical room than horizontal.
Sidebar
侧边栏
A navigation panel pinned to one edge of the screen — always visible, or sliding out from a hamburger button.
Tabs
标签页
Several peer content sections sit side by side; switching tabs swaps the whole panel — and each one gets its own URL.
FAB
浮动操作按钮
The round button that floats in the corner of the screen, usually carrying the "create" action.
How to tell AI
Three levels of promptAdd the component name and specifics
Add bottom navigation to the app with four items — Home / Search / Saved / Profile — where the active item highlights both icon and label.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a menu bar at the bottom.
Say this instead
Add bottom navigation — Home / Search / Saved / Profile — with the active icon and label highlighted, bottom safe-area insets handled, and a badge on items with unread counts.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.