Prop	Description	Type	Default
`children`	Menu item, group, or collapse content rendered inside the root list.	`ReactNode`	-
`className`	Class names applied to the root `ul`.	`string`	-
`collapsed`	Switches menu context into collapsed mode for group labels and collapse indicators.	`boolean`	`false`
`defaultActiveKeys`	Keys matched against descendant menu items to mark them active.	`string[]`	`[]`
`defaultCollapseActiveKeys`	Keys matched against collapse rows to mark those rows active.	`string[]`	`[]`
`defaultExpandedKeys`	Collapse keys opened when the menu renders or when the key list changes.	`string[]`	`[]`
`onSelect`	Called when a menu item selects an `eventKey`.	`MenuSelectHandler`	-
`ref`	Ref forwarded to the root `ul`.	`Ref<HTMLUListElement>`	-
`...nativeProps`	Native props applied to the root `ul`.	`NativeMenuProps`	-

Prop	Description	Type	Default
`asElement`	Element or component rendered for the item.	`ElementType`	`'li'`
`children`	Item label or custom content.	`ReactNode`	-
`className`	Class names merged with the item state classes.	`string`	-
`disabled`	Applies disabled styling and `data-disabled` to the item.	`boolean`	-
`eventKey`	Selection key passed to `onSelect` and matched by active key props.	`string`	-
`hierarchyIndicator`	Shows the hierarchy indicator line before the item content.	`boolean`	-
`indicatorClassName`	Class names applied to the hierarchy indicator wrapper.	`string`	-
`indicatorLineClassName`	Class names applied to the hierarchy indicator line.	`string`	-
`isActive`	Forces the item into the active state independent of `defaultActiveKeys`.	`boolean`	-
`onSelect`	Item-level select handler. Falls back to Menu context `onSelect`.	`MenuSelectHandler`	Menu `onSelect`
`ref`	Ref forwarded to the rendered item element.	`Ref<HTMLElement>`	-
`variant`	Visual treatment for active and hover states.	`MenuVariant`	`'default'`
`...nativeProps`	Native props applied to the rendered item element.	`NativeMenuItemProps`	-

Prop	Description	Type	Default
`active`	Marks the collapse trigger row active.	`boolean`	-
`children`	Nested menu items, groups, or collapse rows.	`ReactNode`	-
`className`	Class names applied to the collapse trigger row.	`string`	-
`eventKey`	Key matched by `defaultExpandedKeys` and `defaultCollapseActiveKeys`.	`string`	-
`expanded`	Opens the collapse row by default.	`boolean`	`false`
`hierarchyIndicator`	Shows the hierarchy indicator before the trigger label.	`boolean`	-
`indent`	Indents the nested content list.	`boolean`	`true`
`label`	Trigger row label.	`string \| ReactNode`	`null`
`onToggle`	Called when the trigger row changes expanded state.	`MenuToggleHandler`	-
`...nativeProps`	Native props applied to the root `li`.	`NativeMenuCollapseProps`	-

Prop	Description	Type	Default
`children`	Menu items or collapse rows rendered inside the group list.	`ReactNode`	-
`className`	Class names applied to the group wrapper.	`string`	-
`label`	Group heading content. Required.	`string \| ReactNode`	-
`...nativeProps`	Native props applied to the group wrapper.	`NativeMenuGroupProps`	-

Types

type MenuVariant = 'default' | 'subtle';
 
type MenuSelectHandler = (eventKey: string, e: MouseEvent) => void;
 
type MenuToggleHandler = (
  expanded: boolean,
  e: MouseEvent<HTMLDivElement>,
) => void;
 
type NativeMenuProps = ComponentProps<'ul'>;
type NativeMenuItemProps = ComponentProps<ElementType>;
type NativeMenuCollapseProps = ComponentProps<'li'>;
type NativeMenuGroupProps = ComponentProps<'div'>;

Menu

Installation

Examples

Basic

With Icons

Collapsible

Groups

Active And Expanded

Disabled

API

Menu

Menu.MenuItem

Menu.MenuCollapse

Menu.MenuGroup

Types