A component to organize, arrange, and display a list of options.
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
- 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
| 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 ofscroll-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> | - | - |
| triggerProps | Pass all Trigger component properties | Partial<TriggerProps> | - | - |
| 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 |
| 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> | - | 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 |
| Property | Description | Type | DefaultValue |
|---|
| title | Title of the menu item group | string | ReactNode | - |
| className | Additional css class | string | string[] | - |
| style | Additional style | CSSProperties | - |
| 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 |
