顶部导航栏Navbar
官网常用区块集中放置品牌、主要页面入口和必要操作
也常被叫作导航栏主导航栏
顶部导航栏通常包含品牌入口、核心页面和必要操作，让用户随时知道可以去哪里。入口要有清楚分组和当前位置；移动端还要提供可展开、可关闭的菜单。
容易混淆？这样区分
顶部导航栏Navbar≠页头Header
页头 Header 是页面顶部的完整区域，可以包含品牌、搜索、登录等内容；顶部导航栏 Navbar 是其中专门放置主要导航入口的部分。
什么时候用
- 三段式结构：Logo + 入口 + 主按钮◆ Logo产品定价文档免费开始
- 当前位置高亮：让人知道自己在哪首页产品文档定价
- 长页面吸顶：滚多远都找得到入口导航栏 · 吸顶
- 落地长页内的分节跳转 → 交给 锚点 Anchor产品特性定价客户评价FAQ
什么时候不用
- 十几个入口全平铺：一眼望不到头仪表盘项目任务文件成员日程报表消息设置回收站
- 把保存、删除等当前页面动作当成主要导航入口保存删除导出
- 桌面宽屏也把入口藏进汉堡菜单◆ Logo
- 没有当前态高亮：用户不知道自己在哪首页产品文档定价没有高亮，我现在在哪一页？
组成结构 · Anatomy
1LogoLogo品牌标识，约定俗成点击回首页
2导航链接Nav Links5 个左右主要入口，当前项高亮
3主操作Action右侧常驻的主按钮，如注册 / 试用
常见变体 · Variants
左 Logo 右链接Standard
绝大多数网站的默认款
带主按钮WithCTA
想让访客注册或试用时
吸顶Sticky
页面很长，入口要一直在
典型使用场景
官网顶部导航
文档站吸顶栏
电商站点导航
博客极简顶栏