ant-design/components/layout/index.en-US.md

category	type	cols	title
Components	Layout	1	Layout

When you are handling the overall layout of a page, this component might be helpfull.

Overview

• Layout: The layout wrapper, in which Header Sider Content Footer or Layout itself can be nested, and can be placed in any parent container.
• Header: The top layout with default style, in which any element can be nested, and must be placed in Layout.
• Sider: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in Layout.
• Content: The content layout with default style, in which any element can be nested, and must be placed in Layout.
• Footer: The bottom layout with default style, in which any element can be nested, and must be placed in Layout.

Base on flex layout, please pay attention to the compatibility.

API

<Layout>
  <Header>header</Header>
  <Layout>
    <Sider>left sidebar</Sider>
    <Content>main content</Content>
    <Sider>right sidebar</Sider>
  </Layout>
  <Footer>footer</Footer>
</Layout>

Layout

The wrapper.

Property	Description	Type	Default
style	to custom the styles	object	-
className	container className	string	-

API of Layout.Header Layout.Footer Layout.Content is the same with Layout.

Layout.Sider

The sidebar.

Property	Description	Type	Default
collapsible	whether can be collapsed	boolean	false
defaultCollapsed	to set the initial status	boolean	false
collapsed	to set the current status	boolean	-
onCollapse	the callback function, can be executed when you switch the sidebar, available only collapsible: true	(collapsed) => {}	-
trigger	specify the customized trigger, set to null to hide the trigger	string|ReactNode	-
width	width of the sidebar	number|string	200
collapsedWidth	width of the collapsed sidebar, available only collapsible: true	number	64
style	to custom the styles	object	-
className	container className	string	-