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 distinguishable by visualization;
- The current item should have the highest priority of visualization;
- 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.
## Visualization rules
Style of a navigation should conform to its level.
- **Emphasis by colorblock**
When background color is a deep color, you can use this pattern for the parent level navigation item of the 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 recommend using it for the last item of the navigation path.
- **Highlighted font**
From the visualization aspect, a highlighted 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 an appropriate font size regarding 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 the 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 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`.
> Based on `flex layout`, please pay attention to the [compatibility](http://caniuse.com/#search=flex).
## 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
The wrapper.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| class | container className | string | - |
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
