2016-12-30 21:41:28 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Layout
2016-12-30 21:41:28 +08:00
title: Layout
2024-03-22 14:22:42 +08:00
description: Handling the overall layout of a page.
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAAAAAAAAAAAADrJ8AQ/original
2016-12-30 21:41:28 +08:00
---
2017-03-17 18:56:37 +08:00
## Specification
### Size
2020-01-30 13:07:51 +08:00
The first level navigation is left aligned near a logo, and the secondary menu is right aligned.
2017-03-17 18:56:37 +08:00
2024-06-12 14:27:15 +08:00
- Top Navigation: the height of the first level navigation is `64px` , and the second level navigation is `48px` .
- Top Navigation (for landing pages): the height of the first level navigation is `80px` , and the second level navigation is `56px` .
2017-06-17 14:14:30 +08:00
- Calculation formula of a top navigation: `48+8n` .
2017-09-05 16:48:23 +08:00
- Calculation formula of an aside navigation: `200+8n` .
2017-03-17 18:56:37 +08:00
### Interaction rules
2018-10-29 12:08:08 +08:00
- The first level navigation and the last level navigation should be distinguishable by visualization;
2017-03-17 18:56:37 +08:00
- The current item should have the highest priority of visualization;
2018-10-29 12:08:08 +08:00
- When the current navigation item is collapsed, the style of the current navigation item is applied to its parent level;
- The left side navigation bar has support for both the accordion and expanding styles; you can choose the one that fits your case the best.
2017-03-17 18:56:37 +08:00
## Visualization rules
2019-05-07 14:57:32 +08:00
Style of a navigation should conform to its level.
2017-03-17 18:56:37 +08:00
- **Emphasis by colorblock**
2024-06-12 14:27:15 +08:00
When the background color is a deep color, you can use this pattern for the parent level navigation item of the current page.
2017-03-17 18:56:37 +08:00
- **The highlight match stick**
2024-06-12 14:27:15 +08:00
When the background color is a light color, you can use this pattern for the current page navigation item; we recommend using it for the last item of the navigation path.
2017-03-17 18:56:37 +08:00
2018-10-29 12:08:08 +08:00
- **Highlighted font**
2017-03-17 18:56:37 +08:00
2018-10-29 12:08:08 +08:00
From the visualization aspect, a highlighted font is stronger than colorblock; this pattern is often used for the parent level of the current item.
2017-03-17 18:56:37 +08:00
- **Enlarge the size of the font**
2022-11-19 22:56:58 +08:00
`12px` , `14px` is a standard font size of navigation's, `14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
2017-03-17 18:56:37 +08:00
## Component Overview
2016-12-30 21:41:28 +08:00
2017-02-24 16:34:10 +08:00
- `Layout` : The layout wrapper, in which `Header` `Sider` `Content` `Footer` or `Layout` itself can be nested, and can be placed in any parent container.
2018-10-29 12:08:08 +08:00
- `Header` : The top layout with the default style, in which any element can be nested, and must be placed in `Layout` .
2017-02-24 16:34:10 +08:00
- `Sider` : The sidebar with default style and basic functions, in which any element can be nested, and must be placed in `Layout` .
2018-10-29 12:08:08 +08:00
- `Content` : The content layout with the default style, in which any element can be nested, and must be placed in `Layout` .
- `Footer` : The bottom layout with the default style, in which any element can be nested, and must be placed in `Layout` .
2016-12-30 21:41:28 +08:00
2017-09-05 16:48:23 +08:00
> Based on `flex layout`, please pay attention to the [compatibility](http://caniuse.com/#search=flex).
2016-12-30 21:41:28 +08:00
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > Basic Structure< / code >
2023-01-05 15:30:59 +08:00
< code src = "./demo/top.tsx" compact background = "grey" > Header-Content-Footer< / code >
< code src = "./demo/top-side.tsx" compact background = "grey" > Header-Sider< / code >
2023-05-11 20:00:00 +08:00
< code src = "./demo/top-side-2.tsx" compact background = "grey" > Header Sider 2< / code >
2022-11-17 11:30:20 +08:00
< code src = "./demo/side.tsx" iframe = "360" > Sider< / code >
2023-01-05 15:30:59 +08:00
< code src = "./demo/custom-trigger.tsx" compact background = "grey" > Custom trigger< / code >
< code src = "./demo/responsive.tsx" compact background = "grey" > Responsive< / code >
2022-11-17 11:30:20 +08:00
< code src = "./demo/fixed.tsx" iframe = "360" > Fixed Header< / code >
< code src = "./demo/fixed-sider.tsx" iframe = "360" > Fixed Sider< / code >
2023-01-05 15:30:59 +08:00
< code src = "./demo/custom-trigger-debug.tsx" compact background = "grey" debug > Custom trigger debug< / code >
2023-08-11 19:37:44 +08:00
< code src = "./demo/component-token.tsx" compact background = "grey" debug > Component Token< / code >
2022-11-09 12:28:04 +08:00
2016-12-30 21:41:28 +08:00
## API
```jsx
< Layout >
< Header > header< / Header >
< Layout >
< Sider > left sidebar< / Sider >
< Content > main content< / Content >
< Sider > right sidebar< / Sider >
< / Layout >
< Footer > footer< / Footer >
< / Layout >
```
### Layout
2023-08-08 18:27:48 +08:00
Common props ref: [Common props](/docs/react/common-props)
2016-12-30 21:41:28 +08:00
The wrapper.
2022-11-17 17:31:26 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| className | Container className | string | - |
| hasSider | Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
| style | To customize the styles | CSSProperties | - |
2016-12-30 21:41:28 +08:00
### Layout.Sider
The sidebar.
2022-11-17 17:31:26 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
2022-12-22 14:12:26 +08:00
| breakpoint | [Breakpoints ](/components/grid/#col ) of the responsive layout | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - |
2022-11-17 17:31:26 +08:00
| className | Container className | string | - |
| collapsed | To set the current status | boolean | - |
| collapsedWidth | Width of the collapsed sidebar, by setting to 0 a special trigger will appear | number | 80 |
| collapsible | Whether can be collapsed | boolean | false |
| defaultCollapsed | To set the initial status | boolean | false |
| reverseArrow | Reverse direction of arrow, for a sider that expands from the right | boolean | false |
| style | To customize the styles | CSSProperties | - |
| theme | Color theme of the sidebar | `light` \| `dark` | `dark` |
| trigger | Specify the customized trigger, set to null to hide the trigger | ReactNode | - |
| width | Width of the sidebar | number \| string | 200 |
| zeroWidthTriggerStyle | To customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - |
2022-12-22 14:12:26 +08:00
| onBreakpoint | The callback function, executed when [breakpoints ](/components/grid/#api ) changed | (broken) => {} | - |
2022-11-17 17:31:26 +08:00
| onCollapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
2017-02-24 16:06:15 +08:00
2017-07-14 13:32:30 +08:00
#### breakpoint width
```js
{
xs: '480px',
2018-01-17 21:54:54 +08:00
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1600px',
2017-07-14 13:32:30 +08:00
}
```
2023-03-27 15:33:22 +08:00
## Design Token
< ComponentTokenTable component = "Layout" > < / ComponentTokenTable >