Menu is a navigation or command component that supports dynamic and static positioning. This is a basic Menu component among all variations of Menu components. The menus are statically positioned by default, but they are made dynamic by providing the target attribute. The static positioned menus are attached to the page body as target (that is, appendTo="body" ), whereas assigning to other elements create dynamic-positioned menus.

A basic menu example, which holds project document or file types of menu items, would be as follows:

<p-menu [model]="items"></p-menu>

The list of menu items needs to be organized within a component class. For example, the root menu item titled Edit will have nested items as shown here:

this.items=[
{
    label: 'Edit',
    icon: 'fa-edit',
    items: [
        {label: 'Undo', icon: 'fa-mail-forward'},
        {label: 'Redo', icon: 'fa-mail-reply'}
    ]
},
//More items ...
}

The following screenshot shows a snapshot result of the basic menu (with all menu items) example:

From the preceding snapshot, you can observe that the Menu component is displayed in the inline format. But, this behavior can be changed by enabling the popup property in order to display as overlay.

The Menu component defines toggle, show, and hide methods for the Menu API. The detailed description of each method listed in tabular format is as follows: