MegaMenu – the multicolumn menu

MegaMenu is like a drop-down menu that expands into a relatively large and complex interface rather than a simple list of commands. It displays the sub-menus of root items together. MegaMenu is formed with the nested menu items where each item's root item is a two-dimensional array which define columns in an Overlay menu.

A basic MegaMenu example of a retailer application to purchase clothing items would be written as follows:

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

The list of menu items needs to be organized with in a component class. For example, a root menu item titled Home & Furniture will have nested items as shown:

this.items = [
  {
    label: 'HOME & FURNITURE', icon: 'fa-home',
    items: [
    [
      {
        label: 'Home Furnishing',
        items: [{label: 'Cushions'}, {label: 'Throws'}, 
        {label: 'Rugs & Doormats'},
               {label...