COMPONENT 04 · Navigation & Orientation
底部导航
Bottom Navigation
也叫Bottom NavTab Bar底部标签栏UITabBar
位于移动设备底部，用图标与标签切换少量一级目的地。
A mobile bar for switching among a small set of top-level destinations.
ANATOMY & USAGE
结构与使用建议
组成部分
- 导航容器
- 图标
- 文字标签
适合使用
- 移动应用有三到五个同级核心入口时。
不建议使用
- 入口很多、层级复杂或操作只是临时动作时。
键盘与无障碍
- 每个图标配可见文字，当前页面用 aria-current，触控目标至少 44px。
DESCRIBE IT TO AI
这样告诉编程助手
实现底部导航（Bottom Navigation）：位于移动设备底部，用图标与标签切换少量一级目的地。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<nav class="demo row" aria-label="底部导航">
<strong>Acme</strong>
<a href="#overview" aria-current="page">概览</a>
<a href="#examples">示例</a>
</nav>