---
title: Menu
path: component/menu
group: Navigation
---

## Menu

Menu, can be used to provide navigation.

### API

#### Menu

| Property | Description | Type | Default |
|------|------|------|--------|
| onClick | Callback fires when a node of menu is clicked | func |  |
| className | class name for the node | string |  |
| prefix | custom prefix | string | 'zent' |


#### MenuItem

| Property | Description | Type | Default |
|------|------|------|--------|
| key | the unique identify of the
 item | string | an ID generated internally  |
| disabled | whether to disable the menu item  | bool |  |
| className | custom class name | string |  |
| prefix | custom prefix | string | 'zent' |


#### SubMenu

| Property | Description | Type | Default |
|------|------|------|--------|
| title | title of the submenu | string |  |
| disabled | whether to disable the submenu  | bool |  |
| overlayClassName | custom class name of the pop menu | string |  |
| className | custom class name of the submenu item | string |  |
| prefix | custom prefix of the submenu item | string | 'zent' |


### FAQ

- A click event callback function, whose parameters are event and key(which is the key property of the node), is used as a unified agent.
- When the `key` property is not set for the MenuItem, a unique identify of the node (starting from 0) is generated automatically in order and hierarchy, which will be saved on the `index` property as the second argument of the `onClick` function.
  When the `key` property is set manually, the property will be copied to the `index` property and will override  the unique identify generated. It's recommanded to manually set the `key` property to a proper value of MenuItem in the condition that the Menu is not complex.
  
  ```
	<Menu>
		<MenuItem>   -------- 'item_0'
		<SubMenu>
			<MenuItem> -------- 'item_1_0'
			<MenuItem> -------- 'item_1_1'
		</SubMenu>
		<MenuItem>   -------- 'item_2'
	</Menu>
	```