PrimeNG provides a MenuModel API, which will be shared by all menu components to specify menu items and sub-menus. The core item of the MenuModel API is the MenuItem class with options such as label, icon, url, child menu items with the items option, and so on.
Let's take an example of the Menu component to represent a common toolbar user interface. The Menu component is binding an array of the MenuItem classes as items through the model property as follows:
<p-menu [model]="items"></p-menu>
MenuItem is the key item in the MenuModel API. It has the following list of properties. Each property is described with the type, default value, and its description:
| Name | Type | Default | Description |
| label | string | null | Text of the item. |
| icon | string | null | Icon of the item. |
| command | function | null | Callback to execute when the item is clicked. |
| url | string | null | External link to navigate when the item is clicked. |
| routerLink | array | null | RouterLink definition for internal navigation. |
| items | array | null | An array of children menu items. |
| expanded | boolean | false | Visibility of sub-menu. |
| disabled | boolean | false | When set as true, disables the menu item. |
| visible | boolean | true | Whether the DOM element of menu item is created or not. |
| target | string | null | Specifies where to open the linked document. |
Table 1.0