# Layout

- Page: https://jiguang132.com/resources/arco-design/docs/layout
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

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

## Install

```bash
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](/react/components/Grid)|[GridResponsiveBreakpoint](#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](resize-box#resizebox) |`-`|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](/react/components/resize-box).|string[] |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|width|Width of sider|number \| string |`200`|-|
|onBreakpoint|Callback when responsive layout breakpoint is triggered|(broken: boolean) => void |`-`|-|

### GridResponsiveBreakpoint

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

---

Index of all JGuang resources: https://jiguang132.com/llms.txt