布局
协助进行页面级整体布局。
设计规则
尺寸
一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
- 顶部导航（大部分系统）：一级导航高度
64px，二级导航48px。 - 顶部导航（展示类页面）：一级导航高度
80px，二级导航56px。 - 顶部导航高度的范围计算公式为：
48+8n。 - 侧边导航宽度的范围计算公式：
200+8n。
交互
- 一级导航和末级的导航需要在可视化的层面被强调出来；
- 当前项应该在呈现上优先级最高；
- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
视觉
导航样式上需要根据信息层级合理的选择样式：
-
大色块强调
建议用于底色为深色系时，当前页面父级的导航项。
-
高亮火柴棍
当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
-
字体高亮变色
从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
-
字体放大
12px、14px是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。
组件概述
Layout：布局容器，其下可嵌套HeaderSiderContentFooter或Layout本身，可以放在任何父容器中。Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout中。Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在Layout中。Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
注意：采用 flex 布局实现，请注意浏览器兼容性问题。
代码演示
- 基本结构 ·
basic - 上中下布局 ·
top - 顶部-侧边布局 ·
top-side - 顶部-侧边布局-通栏 ·
top-side-2 - 侧边布局 ·
side - 自定义触发器 ·
custom-trigger - 折叠覆盖布局 ·
collapsible-overlay - 响应式布局 ·
responsive - 固定头部 ·
fixed - 固定侧边栏 ·
fixed-sider
API
<Layout>
<Header>header</Header>
<Layout>
<Sider>left sidebar</Sider>
<Content>main content</Content>
<Sider>right sidebar</Sider>
</Layout>
<Footer>footer</Footer>
</Layout>
Layout
通用属性参考：通用属性
布局容器。
| 参数 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - | × |
Layout.Sider
侧边栏。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| breakpoint | 触发响应式布局的断点 | xs | sm | md | lg | xl | xxl | xxxl | - | xxxl: 6.3.0 |
| classNames | 用于自定义 Sider 组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| collapsed | 当前收起状态 | boolean | - | |
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 | |
| collapsible | 是否可收起 | boolean | false | |
| defaultCollapsed | 是否默认收起 | boolean | false | |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false | |
| styles | 用于自定义 Sider 组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| theme | 主题颜色 | light | dark | dark | |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | ReactNode | - | |
| width | 宽度 | number | string | 200 | |
| zeroWidthTriggerStyle | 指定当 collapsedWidth 为 0 时出现的特殊 trigger 的样式 | object | - | |
| onBreakpoint | 触发响应式布局断点时的回调 | (broken) => {} | - | |
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
Semantic DOM
| 语义节点 | 原生说明 | 版本 |
|---|---|---|
root | 根元素，包含 Sider 的布局、主题、宽度和折叠状态样式 | — |
body | 内容包裹元素，包含 Sider 子内容的布局和展示样式 | — |
语义说明来源: vendor/components/layout/demo/_semantic.tsx
breakpoint width
{
xs: '480px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1600px',
xxxl: '1920px',
}
主题变量（Design Token）
类型、继承关系和原生令牌声明保持固定源码原文；默认值由原生主题计算，并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。
| 令牌 | 类型 | 原生说明 |
|---|---|---|
colorBgHeader | string | 见原生声明及继承类型 |
colorBgBody | string | 见原生声明及继承类型 |
colorBgTrigger | string | 见原生声明及继承类型 |
bodyBg | string | 主体部分背景色 |
headerBg | string | 顶部背景色 |
headerHeight | number | string | 顶部高度 |
headerPadding | CSSProperties['padding'] | 顶部内边距 |
headerColor | string | 顶部文字颜色 |
footerPadding | CSSProperties['padding'] | 页脚内边距 |
footerBg | string | 页脚背景色 |
siderBg | string | 侧边栏背景色 |
triggerHeight | number | string | 侧边栏开关高度 |
triggerBg | string | 侧边栏开关背景色 |
triggerColor | string | 侧边栏开关颜色 |
zeroTriggerWidth | number | collapse 为 0 时侧边栏开关宽度 |
zeroTriggerHeight | number | collapse 为 0 时侧边栏开关高度 |
lightSiderBg | string | 亮色主题侧边栏背景色 |
lightTriggerBg | string | 亮色主题侧边栏开关背景色 |
lightTriggerColor | string | 亮色主题侧边栏开关颜色 |
声明来源: vendor/components/layout/style/index.ts
import type { CSSProperties } from 'react';
import { unit } from '@ant-design/cssinjs';
import type { CSSObject } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks } from '../../theme/internal';
export interface ComponentToken {
/** @deprecated Use headerBg instead */
colorBgHeader: string;
/** @deprecated Use bodyBg instead */
colorBgBody: string;
/** @deprecated Use triggerBg instead */
colorBgTrigger: string;
/**
* @desc 主体部分背景色
* @descEN Background Color of body
*/
bodyBg: string;
/**
* @desc 顶部背景色
* @descEN Background Color of header
*/
headerBg: string;
/**
* @desc 顶部高度
* @descEN Height of header
*/
headerHeight: number | string;
/**
* @desc 顶部内边距
* @descEN Padding of header
*/
headerPadding: CSSProperties['padding'];
/**
* @desc 顶部文字颜色
* @descEN Text color of header
*/
headerColor: string;
/**
* @desc 页脚内边距
* @descEN Padding of footer
*/
footerPadding: CSSProperties['padding'];
/**
* @desc 页脚背景色
* @descEN Background Color of footer
*/
footerBg: string;
/**
* @desc 侧边栏背景色
* @descEN Background Color of sider
*/
siderBg: string;
/**
* @desc 侧边栏开关高度
* @descEN Height of sider trigger
*/
triggerHeight: number | string;
/**
* @desc 侧边栏开关背景色
* @descEN Background Color of sider trigger
*/
triggerBg: string;
/**
* @desc 侧边栏开关颜色
* @descEN Color of sider trigger
*/
triggerColor: string;
/**
* @desc collapse 为 0 时侧边栏开关宽度
* @descEN Width of sider trigger when collapse is 0
*/
zeroTriggerWidth: number;
/**
* @desc collapse 为 0 时侧边栏开关高度
* @descEN Height of sider trigger when collapse is 0
*/
zeroTriggerHeight: number;
/**
* @desc 亮色主题侧边栏背景色
* @descEN Background Color of light theme sider
*/
lightSiderBg: string;
/**
* @desc 亮色主题侧边栏开关背景色
* @descEN Background Color of light theme sider trigger
*/
lightTriggerBg: string;
/**
* @desc 亮色主题侧边栏开关颜色
* @descEN Color of light theme sider trigger
*/
lightTriggerColor: string;
}
export interface LayoutToken extends FullToken<'Layout'> {}
原生通用属性
Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| style | 自定义样式 | CSSProperties | - |
| className | 自定义类名 | string | - |
| rootClassName | 添加在组件最外层的 className | string | - |
| autoFocus | 自动获取焦点，仅对表单类、链接、交互容器等可聚焦元素生效 | boolean | false |
安装并复现示例
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
使用 ConfigProvider 和原生 App，并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示，不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。
原生类型参考
源码查看器包含未修改的原生实现和以下声明文件，继承类型仍位于原生包中。代码中的英文注释保留为源码参考。
vendor/components/layout/Sider.tsxvendor/components/layout/context.tsvendor/components/layout/index.tsxvendor/components/layout/layout.tsxvendor/components/layout/style/index.ts
来源与许可
https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd
保留原生中英文正文与可执行示例；官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。