Â
Â
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
Part of the Ant Design ecosystem.
🧠Accessible React menu primitives for navigation, command surfaces, and nested item trees.
English | 简体ä¸æ–‡
- 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.
npm install @rc-component/menuimport 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 () => (
<Menu mode="inline" items={items} defaultSelectedKeys={['home']} defaultOpenKeys={['docs']} />
);import Menu, { MenuItem, SubMenu } from '@rc-component/menu';
export default () => (
<Menu>
<MenuItem key="1">Item 1</MenuItem>
<SubMenu key="2" title="More">
<MenuItem key="2-1">Item 2-1</MenuItem>
</SubMenu>
</Menu>
);Run the local dumi site:
npm install
npm startThen open http://localhost:8000.
| Property | Type | Default | Description |
|---|---|---|---|
| activeKey | string | - | Controlled active item key. |
| builtinPlacements | Record<string, any> | - | Popup alignment placements for sub menus. |
| className | string | - | Class name for the root menu. |
| classNames | Partial<Record<'list' | 'listTitle', string>> | - | 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<Record<MenuMode | 'other', CSSMotionProps>> | - | 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<Record<'list' | 'listTitle', CSSProperties>> | - | 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. |
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';
};| 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. |
npm install
npm start
npm test
npm run tsc
npm run compile
npm run buildThe dumi site runs at http://localhost:8000 by default.
npm run prepublishOnlyThe release flow is handled by @rc-component/np through the rc-np command after the package build.
@rc-component/menu is released under the MIT license.