顶部导航布局Top Nav
你可能会说
最经典那种结构：上面一条导航，下面全是内容。
顶部导航布局是一种把主要导航放在页面上方、下方安排内容区域的页面结构官网、社区和内容网站常把品牌、核心入口和主操作放进顶栏，下方展示居中或通栏内容。长页面可让导航配合吸顶 Sticky保持可见；移动端应把过多入口收进清楚、可关闭的菜单，不能只是把文字挤小。
什么时候用
- 按优先级组织顶栏：品牌、主要入口与必要操作可随内容和屏幕重新编排◆ logo产品 · 文档 · 定价免费试用
- 内容区控制可读宽度：根据内容类型、字号和设备测试 max-width，并保留适当边距max-width: 1120px · margin: 0 auto
- 长页面顶栏吸顶：position: sticky，滚多远都在手边顶栏 · position: sticky
- 主操作只有一个：右上角放全站最重要的那个按钮新建项目
什么时候不用
- 顶栏入口过多导致换行：保留核心入口，其余收进 下拉菜单 Dropdown首页产品方案文档博客定价关于招聘活动
- 宽屏内容未限宽：行长过长会影响阅读
- 入口全部做成按钮：导航应使用 导航菜单 Menu 组织仪表盘项目任务文件成员日程报表消息设置回收站
- 顶栏和正文用同一个底色，分不清哪是导航
组成结构 · Anatomy
内容区页脚 · 版权与次要链接
放置品牌入口、导航和主要操作，必要时可吸顶
页面主体，居中限宽，两侧留白
版权、备案、次要链接的收纳处
常见变体 · Variants
静态顶栏Static
页面一屏看完，不用吸顶
吸顶顶栏Sticky
长页面需要持续提供导航入口时
双层顶栏Stacked
导航多到一层放不下时用
典型使用场景
内容站与博客
产品官网
文档站
营销落地页
延伸阅读 · 权威出处