Menu

When to Use

Navigation menus are the soul of a website. Users rely on them to move between pages. Menus are generally divided into top navigation and side navigation. Top navigation provides global categories and features, while side navigation offers a multi-level structure to organize the site architecture.

Attribute	Description	Type	Default
`dataSource`	Data Source of the menu	MenuDataSource[]	`[ { label: "Menu Item 1", key: "key1", children: [ { label: "Option 1", key: "key1-1", tag: { text: "Initialized", color: "blue", }, }, { label: "Option 2", key: "key1-2", }, ], }, { isDivider: true, }, { label: "Menu Item 2", key: "key2", children: [ { label: "Option 1", key: "key2-1", }, { label: "Option 2", key: "key2-2", }, ], }, { label: "Menu Item 3", key: "key3", disabled: true, }, ]`
`direction`	Display direction of the first-level menu	`'ver' \| 'hoz'`	-
`footer`	Custom menu footer	`string`	-
`header`	Custom menu header	`string`	-
`mode`	Opening mode of the submenu	`'inline' \| 'popup'`	`inline`
`onItemClick`	Event triggered when a menu item is clicked	`(key: string, item: MenuDataSource, event: any) => void`	-
`onSelect`	Event triggered when a menu item is selected or unselected	`(selectedKeys: string[], extraObj: any) => void`	-
`popupAlign`	Align mode of the popup layer	`'follow' \| 'outside'`	`'follow'`
`selectMode`	Selection mode of the Menu component	`'single' \| 'multiple' \| false`	`false`
`triggerType`	Trigger behavior for opening the submenu	`'click' \| 'hover'`	`'click'`