跳到主要内容
Termlib

布局模式 · 整体框架

顶栏+内容

Top Navigation Layout

也叫：顶部导航布局、上下布局、顶导布局、Header-Content Layout、Top Nav

页面顶部是一条横向导航栏，放 Logo、主菜单和用户入口，下方整块区域放内容，适合导航项不多的网站。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

页面用顶栏+内容布局：顶部导航栏高 60px、白底、底部 1px 浅灰分割线并吸顶；左侧 Logo，靠左放「首页、产品、价格、文档」四个菜单并高亮当前项，右侧放搜索框和用户头像。导航栏下方是内容区，最大宽度 1200px 居中。手机上菜单收进汉堡按钮。

发给

01判断

你的内容是这样吗？

对照两列，确认顶栏+内容是不是你要找的。

符合这些情况，用顶栏+内容

  • 一级导航项较少（七个以内）、层级浅，一行就能放下时
  • 面向普通访客的官网、电商、博客等以浏览为主的网站
  • 内容区需要尽量多的横向空间时

是这些情况，换成别的

  • 菜单项很多或有多级子菜单、一行放不下时

    改用侧边导航+内容

  • 用户需要在很多功能模块之间频繁切换的后台管理系统

    改用侧边导航+内容

  • 页面只做一件事、不需要全站导航时，比如登录页、分步向导

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    菜单项塞得太多，挤成两行或者文字被截断

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    导航栏没有当前页高亮，用户不知道自己在哪一页

  3. 03

    手机上菜单原样横排，没有收起成汉堡菜单

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

顶部一条横向导航栏，从左到右依次是 Logo、主菜单、工具入口；下方是占满宽度的内容区，内容通常限定最大宽度居中。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1页面最上方一条横贯全宽的导航栏
  2. 2导航栏左侧是 Logo，中间几个文字菜单，右侧是头像或按钮
  3. 3导航栏下方没有侧边栏，内容直接铺开

04解释

详细解释

顶栏+内容是网站最常见的整体框架：最上面一条固定高度（通常 56~64px）的导航栏，左边是 Logo，靠左或居中放几个主菜单，右边是搜索、消息、头像等入口；导航栏下方就是页面内容区。

它把横向空间全部留给内容，适合官网、电商、博客、内容社区这类一级导航少（一般三到七个）、层级浅的产品。导航栏常做成吸顶，页面滚动时始终可见。

它和「侧边导航+内容」的主要区别是能放多少导航：顶栏横向空间有限，菜单超过七八个或者有多级子菜单时就挤不下了，这时应该换成侧边导航。两者也可以组合使用：顶栏放一级模块，左侧放当前模块下的二级菜单。

开发者信息
术语 ID
layout-topbar-content
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-layout:has(> .ant-layout-header):not(:has(.ant-layout-sider)):not(.ant-layout-sider ~ *)
  • .el-container:has(> .el-header):not(:has(.el-aside)):not(.el-aside ~ *)
  • :is(div, section):has(> header):has(> main):not(:has(> aside)):not(aside ~ *):not(:has(~ aside))
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • topbar-layout
  • top-layout
  • header-layout
  • top-nav-layout
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30