Accessing commands via MenuBar

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'},
  ...