顶部导航栏Navbar
你可能会说
顶上的导航要把主要栏目都放进去，我在哪个页面得看得出来。
顶部导航栏是网页页头中提供主要页面入口和当前位置提示的导航区域·官网可以在导航栏放品牌入口、产品、价格和登录等核心链接，并为当前页面加清楚高亮。入口过多时应分组或收进菜单；移动端菜单必须能打开、关闭并用键盘操作，保存、删除等当前页动作不应伪装成主要导航。
也常被叫作导航栏主导航栏
容易混淆？这样区分
顶部导航栏Navbar≠页头 Header
页头 Header 是页面顶部的完整区域，可以包含品牌、搜索、登录等内容；顶部导航栏 Navbar 是其中专门放置主要导航入口的部分。
什么时候用
- 按内容组织品牌、核心入口和必要操作：三段式只是常见布局，搜索、登录、语言切换或多级导航可另行编排◆ Logo产品定价文档免费开始
- 用当前位置标记帮助用户确认所在页面或栏目首页产品文档定价
- 长页面需要频繁跨页导航时，可让导航栏吸顶，同时避免遮挡正文导航栏 · 吸顶
- 同一长页面内的分节跳转更适合使用 锚点 Anchor产品特性定价客户评价FAQ
什么时候不用
- 把大量同级入口全部平铺，会让主要路径难以识别仪表盘项目任务文件成员日程报表消息设置回收站
- 把保存、删除等当前页面动作当成主要导航入口保存删除导出
- 桌面空间充足时仍把所有主要入口藏进菜单，会增加访问步骤◆ Logo☰
- 没有当前位置标记，用户难以确认自己所在页面或栏目首页产品文档定价没有高亮，我现在在哪一页？
组成结构 · Anatomy
常见变体 · Variants
品牌 + 链接Standard
◆产品 定价 文档
入口较少、层级清楚的站点导航
带主要操作WithCTA
◆产品 定价免费开始
注册、登录或试用是高频下一步时
吸顶Sticky
◆产品 定价
长页面需要频繁跨页导航时
典型使用场景
延伸阅读 · 权威出处