--- localeCode: en-US order: 13 category: Basic title: Layout subTitle: Layout icon: doc-layout dir: column brief: Used to quickly divide the overall layout of the page --- ## Overview - `Layout`: Layout containers. You can nest `Header` `Sider` `Content` `Footer` or `Layout` itself inside. - `Header`: Head component, can only be used inside `Layout`. - `Sider`: Sidebar, can only be used inside `Layout`. - `Content`: Content component, can only be used inside `Layout`. - `Footer`: Footer component, can only be used inside `Layout`. 1、Layout components are implemented with Flex layout. Browser compatibility may need to be considered.
2、The Layout component will only help you implement the layout, but will not include styles such as background color, text color, width and height. You can pass in style according to your actual needs or write a separate css implementation given a specific className ## Demos ### How to import ```jsx import import { Layout } from '@douyinfe/semi-ui'; ``` ### Three-section Layout ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout } from '@douyinfe/semi-ui'; () => { const { Header, Footer, Content } = Layout; return (

Header

Content ); }; ``` ### Left-sidebar Layout ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout } from '@douyinfe/semi-ui'; () => { const { Header, Footer, Sider, Content } = Layout; return (

Header

Sider Content ); }; ``` ### Right-sidebar Layout ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout } from '@douyinfe/semi-ui'; () => { const { Header, Footer, Sider, Content } = Layout; return (

Header

Content Sider ); }; ``` ### Sidebar Layout ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout } from '@douyinfe/semi-ui'; () => { const { Header, Footer, Sider, Content } = Layout; return ( Sider

Header

Content ); }; ``` ### Responsive Layout Six response sizes are preset in the sidebar: `xs`,`sm`,`md`,`lg`,`xl`,`xxl`. You can use `breakpoint` to set breakpoints, and use `onBreakpoint` to call callback functions. ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout } from '@douyinfe/semi-ui'; () => { const onbreakpoint = (screen, bool) => { console.log(screen, bool); }; const { Header, Footer, Sider, Content } = Layout; return (

Header

Sider Content ); }; ``` ## Layout Examples ### Top-nav Layout ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui'; import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconLive, IconSetting } from '@douyinfe/semi-icons'; () => { const { Header, Footer, Content } = Layout; return (

} /> } /> } />

)} loading={true}>

Hi, Bytedance dance dance.

); }; ``` ### Top-Nav SideBar Layout ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui'; import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting } from '@douyinfe/semi-icons'; () => { const { Header, Footer, Sider, Content } = Layout; return (

Semi Design Semi Theme Semi Blocks

}, { itemKey: 'Histogram', text: 'Histogram', icon: }, { itemKey: 'Live', text: 'Live', icon: }, { itemKey: 'Setting', text: 'Setting', icon: }, ]} footer={{ collapseButton: true, }} />

)} loading={true}>

Hi, Bytedance dance dance.

); }; ``` ### SideBar Navigation ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui'; import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting } from '@douyinfe/semi-icons'; () => { const { Header, Footer, Sider, Content } = Layout; return (

}, { itemKey: 'Histogram', text: 'Histogram', icon: }, { itemKey: 'Live', text: 'Live', icon: }, { itemKey: 'Setting', text: 'Setting', icon: }, ]} header={{ logo:

, text: 'Webcast' }} footer={{ collapseButton: true, }} />

)} loading={true}>

Hi, Bytedance dance dance.

); }; ``` ## API Reference ### Layout > `Layout.Header`, `Layout.Footer`, `Layout.Content` use same API as `Layout` | Properties | Instructions | type | Default | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------- | ------- | | className | Class name | string | - | | hasSider | Indicates that there is a Sider in the child element, which is generally not specified. It can be used to avoid style flashing during SSR. | boolean | - | | style | Style | CSSProperties | - | | aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) attribute, used to label the current element Description, improve accessibility | string | | 2.2.0 | | role | [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) attribute to improve accessibility | string | | 2.2.0 | ### Layout.Sider | Properties | Instructions | type | Default | | ------------ | -------------------------------------------------------------------------------------- | ------------------------------------ | ------- | | breakpoint | Breakpoints that trigger responsive layout, one of 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' | String[] | - | | className | Class name | string | - | | style | Style | CSSProperties | - | | onBreakpoint | Callback function when triggering a responsive layout breakpoint | (screen: string, broken: bool) => void | - | | aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) attribute, used to label the current element Description, improve accessibility | string | | 2.2.0 | | role | [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) attribute to improve accessibility | string | | 2.2.0 | ### responsive map ```text { xs: '(max-width: 575px)', sm: '(min-width: 576px)', md: '(min-width: 768px)', lg: '(min-width: 992px)', xl: '(min-width: 1200px)', xxl: '(min-width: 1600px)', } ``` ## Accessibility ### ARIA - Sider can pass in aria-label props to describe the function of this Sider. - Header Content Main Footer can pass in role aria-label to describe the function of the corresponding element.