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

category	type	cols	title
Components	Layout	1	Layout

Handling the overall layout of a page.

Specification

Size

The first level navigation is inclined left near a logo, and the secondary menu is inclined right.

• Top Navigation (almost systems): the height of the first level navigation 64px, the second level navigation 48px.
• Top Navigation(contents page): the height of the first level navigation 80px, the second level navigation 56px.
• Calculation formula of a top navigation: 48+8n.
• Calculation formula of an aside navigation: 200+8n.

Interaction rules

• The first level navigation and the last level navigation should be distincted by visualization;
• The current item should have the highest priority of visualization;
• When the current navigation item is collapsed, the stlye of the current navigation item will be 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 best.

Visualization rules

Style of a navigation should conform to the its level.

• Emphasis by colorblock

  When background color is a deep color, you can use this pattern for the parent level navigation item of current page.

• The highlight match stick

  When background color is a light color, you can use this pattern for the current page navigation item, we recommed using it for the last item of the navigation path.

• Hightlighted font

  From the visualization aspect, hightlighted font is stronger than colorblock, this pattern is often used for the parent level of the current item.

• Enlarge the size of the font

  12px、14px is a standard font size of navigations，14px is used for the first and the second level of the navigation. You can choose a approprigate font size in terms of the level of your navigation.

Component 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.

Based 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 customize the styles	object	-
className	container className	string	-

APIs of Layout.Header Layout.Footer Layout.Content are the same as that of Layout.

Layout.Sider

The sidebar.

Property	Description	Type	Default
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
collapsed	to set the current status	boolean	-
onCollapse	the callback function, executed by clicking the trigger or activating the responsive layout	(collapsed, type) => {}	-
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, by setting to 0 a special trigger will appear	number	64
breakpoint	breakpoint of the responsive layout	Enum { 'xs', 'sm', 'md', 'lg', 'xl' }	-
style	to customize the styles	object	-
className	container className	string	-

breakpoint width

{
  xs: '480px',
  sm: '768px',
  md: '992px',
  lg: '1200px',
  xl: '1600px',
}

Note: If you want to wrap the Sider, do not forget to add this setting to the customized component: __ANT_LAYOUT_SIDER = true. e.g.

const CustomizedSider = (props) => <Sider {...props} />
CustomizedSider.__ANT_LAYOUT_SIDER = true;
...
<CustomizedSider>Sider Content</CustomizedSider>