@rc-component/menu

_{Part of the Ant Design ecosystem.}

🧭 Accessible React menu primitives for navigation, command surfaces, and nested item trees.

## Highlights - Horizontal, vertical, and inline menu modes. - Controlled and uncontrolled selection, open keys, and active key state. - `items` configuration API with legacy children support. - Sub menus, item groups, dividers, icons, overflow, popup rendering, and keyboard focus helpers. - TypeScript definitions and semantic `classNames` / `styles` slots. - Used by Ant Design as the shared menu foundation. ## Install ```bash npm install @rc-component/menu ``` ## Usage ```tsx | pure import Menu, { type MenuProps } from '@rc-component/menu'; const items: MenuProps['items'] = [ { key: 'home', label: 'Home' }, { key: 'docs', label: 'Docs', children: [ { key: 'quick-start', label: 'Quick start' }, { key: 'api', label: 'API' }, ], }, ]; export default () => ( ); ``` ```tsx | pure import Menu, { MenuItem, SubMenu } from '@rc-component/menu'; export default () => ( Item 1 Item 2-1 ); ``` ## Examples Run the local dumi site: ```bash npm install npm start ``` Then open `http://localhost:8000`. ## API ### Menu | Property | Type | Default | Description | | --- | --- | --- | --- | | activeKey | `string` | - | Controlled active item key. | | builtinPlacements | `Record` | - | Popup alignment placements for sub menus. | | className | `string` | - | Class name for the root menu. | | classNames | `Partial>` | - | Semantic class names for menu slots. | | defaultActiveFirst | `boolean` | `false` | Focus the first enabled item when active key is absent. | | defaultOpenKeys | `string[]` | `[]` | Initial open sub menu keys. | | defaultSelectedKeys | `string[]` | `[]` | Initial selected item keys. | | defaultMotions | `Partial>` | - | Motion config by menu mode. | | direction | `'ltr' \| 'rtl'` | - | Layout direction. | | disabled | `boolean` | `false` | Disable all menu interactions. | | disabledOverflow | `boolean` | `false` | Disable overflow measurement. | | expandIcon | `ReactNode \| (props: RenderIconInfo) => ReactNode` | - | Custom sub menu expand icon. | | forceSubMenuRender | `boolean` | `false` | Render popup sub menus before they are opened. | | getPopupContainer | `(node: HTMLElement) => HTMLElement` | - | Container for popup sub menus. | | inlineCollapsed | `boolean` | - | Collapse inline menu layout. | | inlineIndent | `number` | `24` | Indent width for inline mode. | | itemIcon | `ReactNode \| (props: RenderIconInfo) => ReactNode` | - | Custom item icon. | | items | `ItemType[]` | - | Menu item configuration. | | mode | `'horizontal' \| 'vertical' \| 'inline'` | `vertical` | Menu display mode. | | motion | `CSSMotionProps` | - | Motion config for menu transitions. | | multiple | `boolean` | `false` | Allow multiple selected items. | | openKeys | `string[]` | - | Controlled open sub menu keys. | | overflowedIndicator | `ReactNode` | `"..."` | Indicator rendered for overflowed items. | | popupRender | `(node, info) => ReactNode` | - | Customize popup menu rendering. | | prefixCls | `string` | `rc-menu` | Class name prefix. | | rootClassName | `string` | - | Class name for the root wrapper. | | selectable | `boolean` | `true` | Allow item selection. | | selectedKeys | `string[]` | - | Controlled selected item keys. | | styles | `Partial>` | - | Semantic styles for menu slots. | | subMenuCloseDelay | `number` | `0.1` | Delay in seconds before closing popup sub menus. | | subMenuOpenDelay | `number` | `0.1` | Delay in seconds before opening popup sub menus. | | triggerSubMenuAction | `'click' \| 'hover'` | `hover` | Interaction that opens sub menus. | | onClick | `(info: MenuInfo) => void` | - | Triggered when an item is clicked. | | onDeselect | `(info: SelectInfo) => void` | - | Triggered when an item is deselected. | | onOpenChange | `(openKeys: string[]) => void` | - | Triggered when open keys change. | | onSelect | `(info: SelectInfo) => void` | - | Triggered when an item is selected. | ### ItemType ```ts type ItemType = | { type?: 'item'; // Item keys accept React.Key and are normalized to strings in event info. key: React.Key; label?: React.ReactNode; disabled?: boolean; itemIcon?: RenderIconType; extra?: React.ReactNode; } | { type?: 'submenu'; // Sub menu keys are strings to match openKeys/defaultOpenKeys. key: string; label?: React.ReactNode; children: ItemType[]; disabled?: boolean; } | { type: 'group'; label?: React.ReactNode; children?: ItemType[]; } | { type: 'divider'; }; ``` ### Ref | Method | Type | Description | | --- | --- | --- | | `focus` | `(options?: FocusOptions) => void` | Focus the active item or first enabled item. | | `findItem` | `({ key: string }) => HTMLElement \| null` | Find the DOM element for an item key. | | `list` | `HTMLUListElement` | Root menu list element. | ## Development ```bash npm install npm start npm test npm run tsc npm run compile npm run build ``` The dumi site runs at `http://localhost:8000` by default. ## Release ```bash npm run prepublishOnly ``` The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. ## License @rc-component/menu is released under the [MIT](./LICENSE) license.