顶部导航栏导航
它是页面最上方显示标题、返回入口和当前页面操作的一条区域。
- 页面最上面带返回和标题的那一条
- 上面左边有返回箭头的那栏
- 顶上写着页面名字的地方
- 顶部导航栏
- 顶栏
- 标题栏
- 页面导航条
示例
示例可交互
Web / iOS / Android 对照
Web原生支持
桌面与移动端主流浏览器；原生能力仅提供导航语义
Navigation
也叫 Navigation Landmark
HTML: <nav>，常与 <header> 组合
Web 的 <nav> 表达导航语义，但不会自带顶栏外观、返回按钮或固定定位，这些视觉与行为仍需自行实现。
iOS原生支持
iOS / iPadOS
Navigation Bar
也叫 Toolbar
SwiftUI: NavigationStack + navigationTitle + toolbar｜UIKit: UINavigationBar
Navigation Bar 表示当前层级，通常包含返回入口、页面标题和少量当前页面操作。SwiftUI 把这些能力组合在导航容器和 toolbar 中。
Android原生支持
Android 手机 / 平板；Material 3 Compose
Top App Bar
Compose Material 3: TopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar
Top App Bar 放在屏幕顶部，用来展示当前页面标题、层级导航入口和与当前页面相关的操作。
使用规范
什么时候用
- 页面需要明确显示当前位置或标题
- 存在返回上一级、关闭当前页或打开上层导航的入口
- 有少量只针对当前页面的常用操作
什么时候别用
- 切换几个同级的一级页面 → 用 Tab Bar 或 Navigation Bar
- 操作很多或标题很长，已经无法在一行内清楚表达 → 重新安排信息层级
- 纯展示页面没有标题、层级或页面操作时，不必为了装饰强行添加
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。