MenuBar component is a group of horizontal menu components with nested sub-menus (or a component with group of drop-down menus for page navigations). Like any other Menu component, MenuBar uses a common menu model API which holds a list of the MenuItem interfaces. There is no limit for nested levels of sub-menus. Let's see a basic MenuBar example for window or application-specific menus. This provides an access for common functions such as opening files, edit operations, interacting with an application, displaying help documentation, and so on, and would be as follows:

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

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

this.items = [
  {
    label: 'Edit',
    icon: 'fa-edit',
    items: [
      {label: 'Cut', icon: 'fa-cut'},
      {label: 'Copy', icon: 'fa-copy'},
      {label: 'Paste', icon: 'fa-paste'},
      {label: 'Undo', icon: 'fa-mail-forward'},
      {label: 'Redo', icon: 'fa-mail-reply'},
      {label: 'Find', icon: 'fa-search', items: [
        {label: 'Find Next'},
        {label: 'Find Previous'}
      ]}
    ]
  },
  // more items......
];

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

The component skinning can be achieved through the style and styleClass properties. PrimeNG 4.1 allows custom content (form controls) by placing them inside the MenuBar tags.