# Menu

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

A component to organize, arrange, and display a list of options.

## 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

- **Horizontal**: By setting `mode` to `horizontal`, you can use the horizontal menu.
- **Dark Theme**: The theme is specified by `theme`, which can be divided into two types: `light` and `dark`.
- **Collapsed Menu**: Use `collapse` to specify the menu to collapse. Use `renderItemInTooltip` to specify the content of the menu item displayed in `Tooltip` when the menu is collapsed.
- **Sub Menu**: Multiple sub-items can be embedded in the menu, and the items that are opened by default can be set through `defaultOpenKeys`.
- **Custom Size**: Freely specify width of menu and height of menu item through `style`.
- **Floating Menu**: Specify `mode` as `pop` to use floating menu.
- **Floating Button Menu**: By setting `mode` to `popButton`, you can use a button group style floating menu.

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

### Menu

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|accordion|Whether to render as Accordion|boolean |`-`|-|
|autoOpen|Whether to expand all multi-level menus by default|boolean |`-`|-|
|autoScrollIntoView|Whether to automatically scroll the selected item to the visible area|boolean |`-`|-|
|collapse|Whether to collapse the menu horizontally|boolean |`-`|-|
|hasCollapseButton|Whether built-in folding button|boolean |`-`|-|
|selectable|Whether is the menu item selectable|boolean |`true`|-|
|levelIndent|Indentation between levels|number |`-`|-|
|mode|Mode of Menu|'vertical' \| 'horizontal' \| 'pop' \| 'popButton' |`vertical`|-|
|theme|Theme of Menu|'light' \| 'dark' |`light`|-|
|className|Additional css class|string \| string[] |`-`|-|
|defaultOpenKeys|The initially opened menu item's key array|string[] |`-`|-|
|defaultSelectedKeys|The initially selected menu item's key array|string[] |`-`|-|
|ellipsis|Whether the horizontal menu automatically collapses when it overflows|\| boolean\| {text?: ReactNode;} |`true`|2.24.0|
|icons|Customize icons|{horizontalArrowDown?: ReactNode \| null;popArrowRight?: ReactNode \| null;collapseDefault?: ReactNode \| null;collapseActive?: ReactNode \| null;} |`-`|-|
|openKeys|Opened menu item's key array|string[] |`-`|-|
|scrollConfig|Scroll to the configuration item in the visible area and receive all the parameters of[scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)|{ [key: string]: any } |`-`|-|
|selectedKeys|Selected menu item's key array|string[] |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|tooltipProps|Pass all `Tooltip` component properties|Partial<[TooltipProps](tooltip#tooltip)> |`-`|-|
|triggerProps|Pass all `Trigger` component properties|Partial<[TriggerProps](trigger#trigger)> |`-`|-|
|onClickMenuItem|Click menu item callback|(key: string, event, keyPath: string[]) => any |`-`|`event` in 2.15.0, `keyPath` in 2.19.0|
|onClickSubMenu|Callback when click sub menu|(key: string, openKeys: string[], keyPath: string[]) => void |`-`|`keyPath` in 2.19.0|
|onCollapseChange|Callback when menu collapse status changed|(collapse: boolean) => void |`-`|-|
|onEllipsisChange|Callback when horizontal-menu ellipsis status changed|(status: { lastVisibleIndex: number; overflowNodes: ReactNode[] }) => void |`-`|2.57.0|

### Menu.SubMenu

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|selectable|Whether to use the subMenu header as a menu item which can be selected|boolean |`-`|-|
|key|Unique ID of the subMenu|string  **(Required)**|`-`|-|
|title|Title of the subMenu|string \| ReactNode |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|triggerProps|Pass all `Trigger` component properties|Partial<[TriggerProps](trigger#trigger)> |`-`|2.19.0|
|popup|Whether to force the use of popup mode, parameter `level` indicates the level of current subMenu.|boolean \| ((level: number) => boolean) |`-`|2.8.0|

### Menu.ItemGroup

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|title|Title of the menu item group|string \| ReactNode |`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|

### Menu.Item

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|disabled|Whether the item is disabled|boolean |`-`|-|
|key|Unique ID of the menu item|string  **(Required)**|`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|wrapper|Configure the outermost label, which can be a html label or a component|string \| React.FC<any> \| React.ComponentClass<any> |`div`|2.16.0|
|renderItemInTooltip|Set the menu item displayed in Tooltip when menu is collapsed|() => ReactNode |`-`|2.51.0|

---

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