MegaMenuMegaMenu displays submenus of root items together.

MegaMenu - 图1

Documentation

Import

  2. import {MegaMenuModule} from 'primeng/megamenu';
  3.  

MenuModel API

MegaMenu uses the common menumodel api to define its items, visit MenuModel API for details.

Getting Started

MegaMenu requires nested menuitems as its model where the items of a root menuitem is a two dimensional array to define columns in an overlay submenu.

  2. <p-megaMenu [model]="items"></p-megaMenu>
  3.  
  2.     export class MegaMenuDemo {
  4.         items: MenuItem[];
  6.         ngOnInit() {
  7.             this.items = [
  8.                 {
  9.                     label: 'TV', icon: 'fa fa-fw fa-check',
  10.                     items: [
  11.                         [
  12.                             {
  13.                                 label: 'TV 1',
  14.                                 items: [{label: 'TV 1.1'},{label: 'TV 1.2'}]
  15.                             },
  16.                             {
  17.                                 label: 'TV 2',
  18.                                 items: [{label: 'TV 2.1'},{label: 'TV 2.2'}]
  19.                             }
  20.                         ],
  21.                         [
  22.                             {
  23.                                 label: 'TV 3',
  24.                                 items: [{label: 'TV 3.1'},{label: 'TV 3.2'}]
  25.                             },
  26.                             {
  27.                                 label: 'TV 4',
  28.                                 items: [{label: 'TV 4.1'},{label: 'TV 4.2'}]
  29.                             }    
  30.                         ]
  31.                     ]
  32.                 },
  33.                 {
  34.                     label: 'Sports', icon: 'fa fa-fw fa-soccer-ball-o',
  35.                     items: [
  36.                         [
  37.                             {
  38.                                 label: 'Sports 1',
  39.                                 items: [{label: 'Sports 1.1'},{label: 'Sports 1.2'}]
  40.                             },
  41.                             {
  42.                                 label: 'Sports 2',
  43.                                 items: [{label: 'Sports 2.1'},{label: 'Sports 2.2'}]
  44.                             },
  46.                         ],
  47.                         [
  48.                             {
  49.                                 label: 'Sports 3',
  50.                                 items: [{label: 'Sports 3.1'},{label: 'Sports 3.2'}]
  51.                             },
  52.                             {
  53.                                 label: 'Sports 4',
  54.                                 items: [{label: 'Sports 4.1'},{label: 'Sports 4.2'}]
  55.                             }
  56.                         ],
  57.                         [
  58.                             {
  59.                                 label: 'Sports 5',
  60.                                 items: [{label: 'Sports 5.1'},{label: 'Sports 5.2'}]
  61.                             },
  62.                             {
  63.                                 label: 'Sports 6',
  64.                                 items: [{label: 'Sports 6.1'},{label: 'Sports 6.2'}]
  65.                             }
  66.                         ]
  67.                     ]
  68.                 }
  69.             ];
  70.         }
  71.     }
  72.  

Custom Content

Custom content can be placed between p-megaMenu tags. Megamenu should be horizontal for custom content.

  2. <p-megaMenu [model]="items">
  3.     <input type="text" pInputText placeholder="Search">
  4.     <button pButton label="Logout" icon="fa fa-sign-out"></button>
  5. </p-megaMenu>
  6.  

Properties

NameTypeDefaultDescription
modelarraynullAn array of menuitems.
orientationstringhorizontalDefines the orientation, valid values are horizontal and vertical.
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.
baseZIndexnumber0Base zIndex value to use in layering.
autoZIndexbooleantrueWhether to automatically manage layering.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
ui-megamenuContainer element.
ui-menu-listList element.
ui-menuitemMenuitem element.
ui-menuitem-textLabel of a menuitem.
ui-menuitem-iconIcon of a menuitem.
ui-submenu-iconArrow icon of a submenu.

Dependencies

None.

Source

View on GitHub

  2. <p-megaMenu [model]="items"></p-megaMenu>
  3.  
  2. export class MegaMenuDemo {
  4.     items: MenuItem[];
  6.     ngOnInit() {
  7.         this.items = [
  8.             {
  9.                 label: 'TV', icon: 'fa fa-fw fa-check',
  10.                 items: [
  11.                     [
  12.                         {
  13.                             label: 'TV 1',
  14.                             items: [{label: 'TV 1.1'},{label: 'TV 1.2'}]
  15.                         },
  16.                         {
  17.                             label: 'TV 2',
  18.                             items: [{label: 'TV 2.1'},{label: 'TV 2.2'}]
  19.                         }
  20.                     ],
  21.                     [
  22.                         {
  23.                             label: 'TV 3',
  24.                             items: [{label: 'TV 3.1'},{label: 'TV 3.2'}]
  25.                         },
  26.                         {
  27.                             label: 'TV 4',
  28.                             items: [{label: 'TV 4.1'},{label: 'TV 4.2'}]
  29.                         }    
  30.                     ]
  31.                 ]
  32.             },
  33.             {
  34.                 label: 'Sports', icon: 'fa fa-fw fa-soccer-ball-o',
  35.                 items: [
  36.                     [
  37.                         {
  38.                             label: 'Sports 1',
  39.                             items: [{label: 'Sports 1.1'},{label: 'Sports 1.2'}]
  40.                         },
  41.                         {
  42.                             label: 'Sports 2',
  43.                             items: [{label: 'Sports 2.1'},{label: 'Sports 2.2'}]
  44.                         },
  46.                     ],
  47.                     [
  48.                         {
  49.                             label: 'Sports 3',
  50.                             items: [{label: 'Sports 3.1'},{label: 'Sports 3.2'}]
  51.                         },
  52.                         {
  53.                             label: 'Sports 4',
  54.                             items: [{label: 'Sports 4.1'},{label: 'Sports 4.2'}]
  55.                         }
  56.                     ],
  57.                     [
  58.                         {
  59.                             label: 'Sports 5',
  60.                             items: [{label: 'Sports 5.1'},{label: 'Sports 5.2'}]
  61.                         },
  62.                         {
  63.                             label: 'Sports 6',
  64.                             items: [{label: 'Sports 6.1'},{label: 'Sports 6.2'}]
  65.                         }
  66.                     ]
  67.                 ]
  68.             },
  69.             {
  70.                 label: 'Entertainment', icon: 'fa fa-fw fa-child',
  71.                 items: [
  72.                     [
  73.                         {
  74.                             label: 'Entertainment 1',
  75.                             items: [{label: 'Entertainment 1.1'},{label: 'Entertainment 1.2'}]
  76.                         },
  77.                         {
  78.                             label: 'Entertainment 2',
  79.                             items: [{label: 'Entertainment 2.1'},{label: 'Entertainment 2.2'}]
  80.                         }
  81.                     ],
  82.                     [
  83.                         {
  84.                             label: 'Entertainment 3',
  85.                             items: [{label: 'Entertainment 3.1'},{label: 'Entertainment 3.2'}]
  86.                         },
  87.                         {
  88.                             label: 'Entertainment 4',
  89.                             items: [{label: 'Entertainment 4.1'},{label: 'Entertainment 4.2'}]
  90.                         }    
  91.                     ]
  92.                 ]
  93.             },
  94.             {
  95.                 label: 'Technology', icon: 'fa fa-fw fa-gears',
  96.                 items: [
  97.                     [
  98.                         {
  99.                             label: 'Technology 1',
  100.                             items: [{label: 'Technology 1.1'},{label: 'Technology 1.2'}]
  101.                         },
  102.                         {
  103.                             label: 'Technology 2',
  104.                             items: [{label: 'Technology 2.1'},{label: 'Technology 2.2'}]
  105.                         },
  106.                         {
  107.                             label: 'Technology 3',
  108.                             items: [{label: 'Technology 3.1'},{label: 'Technology 3.2'}]
  109.                         }
  110.                     ],
  111.                     [
  112.                         {
  113.                             label: 'Technology 4',
  114.                             items: [{label: 'Technology 4.1'},{label: 'Technology 4.2'}]
  115.                         }  
  116.                     ]
  117.                 ]
  118.             }
  119.         ];
  120.     }
  121. }
  122.