顶部导航栏
Navbar
别名:导航栏顶部菜单页面最上面那一条header 导航页头导航汉堡菜单那条栏top bar
这是什么
固定在页面顶部的水平导航条:左侧品牌标识,中间主导航链接,右侧搜索、 入口按钮与用户头像。它是网站的"门面导航",把最重要的三到七个入口压进 一条横向空间,移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
交互实验室
试一试,再决定怎么用切换导航栏目,展开菜单,搜索资源并体验开始按钮。
正在加载实验室…
使用时关注什么
- 01当前栏目与展示内容应对应。
- 02窄屏下导航仍有可发现的入口。
从参考到实践
AI 生成的视觉参考 · 点击查看完整图集
✓ 适用场景
- 入口少而扁平的官网、产品站、文档站
- 品牌与全局动作需要常驻首屏
- 页面结构上下流动、适合顶部横向空间
✕ 不适用场景
- 层级深、模块多的后台(侧边栏更合适)
- 需要同时扫视大量导航项
- 沉浸式阅读、编辑器等全屏场景
常见形式
标准
Standard
品牌左、链接中、动作右
居中
Centered
链接绝对居中,Apple 官网风格
透明悬浮
Transparent overlay
压在首屏大图上,滚动后加底色
悬浮容器
Floating container
导航置于带圆角、描边与轻阴影的独立容器中。
实现要点
position: stickyz-indexflexjustify-content: space-between用 sticky 置顶,内部 flex 三段式(品牌 / 链接 / 动作)。当前项用 accent 色或下划线标识(aria-current="page")。移动端断点下隐藏链接、显示汉堡 按钮,展开为下拉面板或抽屉;透明悬浮变体在滚动超过首屏高度后切换 background 与 backdrop-filter。
平台 API
<nav>role="navigation"横向对比
查看完整对比 →相关概念
固定在页面一侧(通常左侧)的垂直导航区,承载产品的主要层级入口。 后台管理系统的事实标准:顶部放品牌与全局搜索,侧边栏放模块树,内容区专注任务。
组件替代方案点击或右键触发的临时操作列表浮层:平铺或分组的命令项,选中即执行并关闭。 用于收纳非高频操作(更多、设置、删除),通常以「⋯」按钮或右键唤起。
组件替代方案用"首页 / 分类 / 子类 / 当前页"的层级路径表示用户在信息架构中所处的位置: 每个上级都可点击跳回,末项为当前页不可点。这是防止用户迷路成本最低的手段, 命名源自童话中沿途撒下用来标记归路的面包屑。常置于页面标题上方。
组件相似概念用一排可切换的标签把同一区域的内容分成互斥视图:标签头常驻可点击,仅当前 标签对应的面板可见,其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换,避免整页跳转。键盘上用左右方向键在标签间移动,是可访问性的经典范例。
组件相似概念围绕单一转化目标纵向组织信息的营销页面:顶部导航与 Hero 主视觉先讲清楚"这是什么、好在哪", 中段用功能区、信任区(客户 logo、评价、数据)逐层打消顾虑,末端以强视觉的行动按钮收口。 页面按说服顺序分区,每一屏都在回答用户下一步的疑问。
页面搭配使用

