Search
Layout
Handling the overall layout of a page
Basic Structure
Classic page layouts.
Header-Content-Footer
The most basic "header-content-footer" layout.
Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it. We always put contents in a fixed size navigation (eg: 1200px), the layout of the whole page is stable, it's not affected by viewing area.
Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it. We always put contents in a fixed size navigation (eg: 1200px), the layout of the whole page is stable, it's not affected by viewing area.
Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links
Content
Header Sider 2
Both the top navigation and the sidebar, commonly used in application site.
Content
Header-Sider
Both the top navigation and the sidebar, commonly used in documentation site.
Content
Sider
Two-columns layout. The sider menu can be collapsed when horizontal space is limited.
Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.
The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents
Custom trigger
If you want to use a customized trigger, you can hide the default one by setting trigger={null}.
Content
Responsive
Layout.Sider supports responsive layout.
Note: You can get a responsive layout by setting breakpoint, the Sider will collapse to the width of collapsedWidth when window width is below the breakpoint. And a special trigger will appear if thecollapsedWidth is set to 0.
Content
Fixed Header
Fixed Header is generally used to fix the top navigation to facilitate page switching.
Fixed Sider
When dealing with long content, a fixed sider can provide a better user experience.
Layout
The wrapper.
| 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 | - |
Layout.Sider
The sidebar.
| Property | Description | Type | Default |
|---|---|---|---|
breakpoint | breakpoints of the responsive layout | xs | sm | md | lg | xl | xxl } | - |
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 | string|ReactNode | - |
width | width of the sidebar | number|string | 200 |
onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
onBreakpoint | the callback function, executed when breakpoints changed | (broken) => {} | - |
zeroWidthTriggerStyle | to customize the styles of the special trigger that appears when collapsedWidth is 0 | object | - |