底部标签栏导航
它是固定在页面底部的一排入口，用来在几个同级的主要页面之间来回切换。
- 手机下面那排切换页面的按钮
- 底下有首页消息我的那一排
- 点底下图标换页面的东西
- 底部标签栏
- 底部导航栏
- 页签栏
- 主导航栏
示例
示例可交互
Web / iOS / Android 对照
Web需自己实现
桌面与移动端主流浏览器
Tab Bar
也叫 Bottom Navigation
Web 没有专门对应移动端底部标签栏的原生组件。网站的主要目的地应使用导航链接；只有在同一页面内切换成组内容时，才应使用标签页交互。
通常怎么做：主要页面入口使用 <nav> 包裹链接并通过样式固定到底部；页内面板切换才采用 ARIA Tabs。
iOS原生支持
iOS / iPadOS
Tab Bar
SwiftUI: TabView｜UIKit: UITabBarController / UITabBar
Tab Bar 用于应用最顶层的少量同级区域，通常持续显示在屏幕底部，并明确标出当前所在区域。
Android原生支持
Android 手机 / 平板；Material 3 Compose
Navigation Bar
也叫 Bottom Navigation
Compose Material 3: NavigationBar / NavigationBarItem
Material 3 把旧称 Bottom Navigation 改为 Navigation Bar，用于三个到五个同等重要的主要目的地。
使用规范
什么时候用
- 应用有少量、长期稳定且同等重要的一级页面
- 用户需要频繁在这些一级页面之间来回切换
- 每个入口都能用简短文字和易懂图标表达
- 当前所在的一级页面需要始终清楚标出，切换后仍保留各页面内部状态
什么时候别用
- 页面存在前后层级或需要返回上一级 → 用 Navigation Bar 或 Top App Bar
- 入口超过五个或经常变化 → 改用其他导航结构
- 用于同一页面里的内容筛选 → 用 Segmented Control 或 Tabs
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。