← 返回 Web 词条
顶部导航栏
在 Web 上叫Navigation
HTML: <nav>,常与 <header> 组合
Web 的 <nav> 表达导航语义,但不会自带顶栏外观、返回按钮或固定定位,这些视觉与行为仍需自行实现。
它是页面最上方显示标题、返回入口和当前页面操作的一条区域。
- 页面最上面带返回和标题的那一条
- 上面左边有返回箭头的那栏
- 顶上写着页面名字的地方
- 顶部导航栏
- 顶栏
- 标题栏
- 页面导航条
其他平台的相似实现
iOS原生支持
Navigation Bar异名Navigation Bar 表示当前层级,通常包含返回入口、页面标题和少量当前页面操作。
看 iOS 视角 →Android原生支持
Top App Bar异名Top App Bar 放在屏幕顶部,用来展示当前页面标题、层级导航入口和与当前页面相关的操作。
看 Android 视角 →使用规范
什么时候用
- 页面需要明确显示当前位置或标题
- 存在返回上一级、关闭当前页或打开上层导航的入口
- 有少量只针对当前页面的常用操作
什么时候别用
- 切换几个同级的一级页面 → 用 Tab Bar 或 Navigation Bar
- 操作很多或标题很长,已经无法在一行内清楚表达 → 重新安排信息层级
- 纯展示页面没有标题、层级或页面操作时,不必为了装饰强行添加
容易混淆
Web 出处
查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例。