顶栏+内容
Top Navigation Layout
布局模式也叫：顶部导航布局、上下布局、顶导布局、Header-Content Layout、Top Nav
一句话：页面顶部是一条横向导航栏，放 Logo、主菜单和用户入口，下方整块区域放内容，适合导航项不多的网站。
详细解释
顶栏+内容是网站最常见的整体框架：最上面一条固定高度（通常 56~64px）的导航栏，左边是 Logo，靠左或居中放几个主菜单，右边是搜索、消息、头像等入口；导航栏下方就是页面内容区。
它把横向空间全部留给内容，适合官网、电商、博客、内容社区这类一级导航少（一般三到七个）、层级浅的产品。导航栏常做成吸顶，页面滚动时始终可见。
它和「侧边导航+内容」的主要区别是能放多少导航：顶栏横向空间有限，菜单超过七八个或者有多级子菜单时就挤不下了，这时应该换成侧边导航。两者也可以组合使用：顶栏放一级模块，左侧放当前模块下的二级菜单。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
页面用顶栏+内容布局：顶部导航栏高 60px、白底、底部 1px 浅灰分割线并吸顶；左侧 Logo，靠左放「首页、产品、价格、文档」四个菜单并高亮当前项，右侧放搜索框和用户头像。导航栏下方是内容区，最大宽度 1200px 居中。手机上菜单收进汉堡按钮。
结构与适用场景
结构描述
顶部一条横向导航栏，从左到右依次是 Logo、主菜单、工具入口；下方是占满宽度的内容区，内容通常限定最大宽度居中。
适用场景
- 一级导航项较少（七个以内）、层级浅，一行就能放下时
- 面向普通访客的官网、电商、博客等以浏览为主的网站
- 内容区需要尽量多的横向空间时
不适用场景
- 菜单项很多或有多级子菜单、一行放不下时（应该用侧边导航+内容）
- 用户需要在很多功能模块之间频繁切换的后台管理系统
- 页面只做一件事、不需要全站导航时，比如登录页、分步向导
常见坏用法
- 菜单项塞得太多，挤成两行或者文字被截断
- 导航栏没有当前页高亮，用户不知道自己在哪一页
- 手机上菜单原样横排，没有收起成汉堡菜单
识别特征
- 页面最上方一条横贯全宽的导航栏
- 导航栏左侧是 Logo，中间几个文字菜单，右侧是头像或按钮
- 导航栏下方没有侧边栏，内容直接铺开
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
.ant-layout:has(> .ant-layout-header):not(:has(.ant-layout-sider)).el-container:has(> .el-header):not(:has(.el-aside))