顶部导航布局
Top Nav
初级通用顶部导航布局（Top Nav）是把主要页面入口横向放在页面上方、内容放在下方的布局方式。它让用户在不同页面间切换时，始终容易找到主要入口，常见于栏目不多的产品网站或轻量后台。
你可能会说：「我想把几个主要页面入口横着放在页面上方，下面留给各页面的内容。」
动手看看轻量官网的顶部导航
切换「当前栏目」模拟页面跳转；也可以悬停、按住导航入口，或用 Tab 聚焦，看看交互反馈。这个小样由参数切换页面，点击只展示按压反馈。
留意上方横排入口和下方内容的分工：栏目怎么换，导航的位置和顺序都不变。这里的位置稳定不等于滚动时吸顶。
产品页换成具体功能，但首页和帮助仍在原处。只有三个主要栏目，横向排开很容易扫一眼找齐，这正是顶部导航擅长的场景。
要点顶部导航布局怎样组织页面？
- 1
上方放入口，下方放内容
你可以把页面看成上下两块：上面承载主要页面入口，下面展示当前页面。比如 AI 工具把「对话」「知识库」「设置」放在顶部，用户切换入口时，主要内容随之变化。
- 2
入口数量影响使用体验
横向空间有限，所以顶部更适合放少量、稳定的主要入口。如果产品不断增加功能，把所有入口都挤进一行会让人难找；这时我们可以重新分组，或考虑左侧栏布局。
- 3
窄屏需要重新安排入口
桌面上能排开的一行链接，到了手机上可能放不下。你和 AI Agent 讨论实现时，可以明确窄屏下哪些入口直接显示、哪些收进导航菜单，而不是只说「做成响应式」。
容易混淆的地方
顶部导航布局说的是整个页面的组织方式：导航在上，主要内容在下。顶部导航栏只是其中承载入口的界面区域，做了导航栏不等于整页都采用这种布局。它也不同于左侧栏布局；当后台有很多模块和多级入口时，左侧栏通常更方便容纳和展开导航。
什么时候用
适合用
- 做一个有「产品」「定价」「文档」等少量主要页面的网站，想让访客随时切换栏目。
- 做一个功能模块不多的 AI 工具，让用户从顶部切换对话、历史记录和设置页面。
不适合用
- 做模块多、层级深的管理后台时，横向空间很快不够用；可以改用左侧栏布局组织入口。
- 做只有一条线性流程的开户页面时，用户主要是按顺序完成任务；用步骤条说明进度更合适。
练一练选一个答案，看看解释
你要做一个有五个主要栏目的产品网站，桌面端希望用户在任意栏目都能切换到其他栏目。哪种方案最符合顶部导航布局？
让 AI 帮你做复制给 AI Agent 直接用
请把这个产品网站做成顶部导航布局：桌面端在页面上方横向展示「产品」「定价」「文档」「关于」四个主要入口，下方展示当前页面内容；标明当前入口，并说明窄屏放不下时如何收起导航。