Layout

The basic layout framework which is often nested with components to build the overall layout of the page.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: A typical page layout.
Customize button's icon: By setting the trigger property of Menu.Sider, the icon of the collapse button can be customized.
Customize collapse button: After setting the trigger property of Menu.Sider to null, the built-in trigger of Sider will not be displayed. At this time, you can customize the collapse button.
Responsive sider: The Sider on the left can be used with together Menu and set to expand/collapse. Setting breakpoint can enable responsive contraction.
Retractable sidebar: By resizeDirections, you can use the mouse to drag the sidebar to zoom in and out.
Resizable and collapsible sidebar: Through the resizeBoxProps.onMoving method, configuring width and collapsed can realize that you can drag the telescopic rod or click the collapsed sidebar. At this point the width of the sidebar is fully controlled by width.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Layout

Property	Description	Type	DefaultValue
hasSider	Indicates that there is a `Sider` in the children. Generally no need to specify.It's used to avoid flicker during server-side rendering	boolean	`-`
className	Additional css class	string \| string[]	`-`
style	Additional style	CSSProperties	`-`

Layout.Header

Property	Description	Type	DefaultValue
className	Additional css class	string \| string[]	`-`
style	Additional style	CSSProperties	`-`

Layout.Footer

Property	Description	Type	DefaultValue
className	Additional css class	string \| string[]	`-`
style	Additional style	CSSProperties	`-`

Layout.Content

Property	Description	Type	DefaultValue
className	Additional css class	string \| string[]	`-`
style	Additional style	CSSProperties	`-`

Layout.Sider

Property	Description	Type	DefaultValue	Version
collapsed	Whether sider is collapsed	boolean	`-`	-
collapsible	Whether sider can be collapsed	boolean	`-`	-
defaultCollapsed	Whether sider is collapsed by default	boolean	`-`	-
reverseArrow	Reverse the direction of the fold arrow, can be used when sider is on the right	boolean	`-`	-
collapsedWidth	Width of collapsed sider	number	`48`	-
onCollapse	Callback when sider collapse state changes	(collapse: boolean, type: 'clickTrigger' \| 'responsive') => void	`-`	-
theme	Theme of layout	'dark' \| 'light'	`light`	-
trigger	Customize the trigger element to collapse sider at bottom. Set it to `null` to hide the trigger	string \| ReactNode	`-`	-
breakpoint	Breakpoint in responsive layout. See details Grid	GridResponsiveBreakpoint	`-`	-
className	Additional css class	string \| string[]	`-`	-
resizeBoxProps	All props of `ResizeBox` can be accepted. The `width` of the menu bar can be displayed in a controlled manner through `resizeBoxProps` or linked with `collapsed`	ResizeBoxProps	`-`	2.34.0
resizeDirections	You can replace the native `aside` tag with `ResizeBox`, under which case this param will be the `directions` property of `ResizeBox`.See details ResizeBox.	string[]	`-`	-
style	Additional style	CSSProperties	`-`	-
width	Width of sider	number \| string	`200`	-
onBreakpoint	Callback when responsive layout breakpoint is triggered	(broken: boolean) => void	`-`	-

GridResponsiveBreakpoint

export type GridResponsiveBreakpoint =
  | "xxxl"
  | "xxl"
  | "xl"
  | "lg"
  | "md"
  | "sm"
  | "xs";