MenubarMenubar is an horizontal menu components with support for nested submenus.

Menubar - 图1

Documentation

Import

  2. import {MenubarModule} from 'primeng/menubar';
  3. import {MenuItem} from 'primeng/api';
  4.  

MenuModel API

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

Getting Started

Menubar requires nested menuitems as its model.

  2. <p-menubar [model]="items"></p-menubar>
  3.  
  2. export class MenubarDemo {
  4.     items: MenuItem[];
  6.     ngOnInit() {
  7.         this.items = [
  8.             {
  9.                 label: 'File',
  10.                 items: [{
  11.                         label: 'New', 
  12.                         icon: 'pi pi-fw pi-plus',
  13.                         items: [
  14.                             {label: 'Project'},
  15.                             {label: 'Other'},
  16.                         ]
  17.                     },
  18.                     {label: 'Open'},
  19.                     {label: 'Quit'}
  20.                 ]
  21.             },
  22.             {
  23.                 label: 'Edit',
  24.                 icon: 'pi pi-fw pi-pencil',
  25.                 items: [
  26.                     {label: 'Delete', icon: 'pi pi-fw pi-trash'},
  27.                     {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
  28.                 ]
  29.             }
  30.         ];
  31.     }
  32. }
  33.  

Custom Content

Custom content can be placed between p-menubar tags.

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

Properties

NameTypeDefaultDescription
modelarraynullAn array of menuitems.
autoDisplaybooleantrueDisplay menu item when mouse enter or display menu item when clicked
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-menubarContainer 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-menubar [model]="items">
  3.     <div>
  4.         <input type="text" pInputText placeholder="Search">
  5.         <button pButton label="Logout" icon="fa fa-sign-out" style="margin-left:.25em"></button>
  6.     </div>
  7. </p-menubar>
  8. <p-menubar [model]="items" [autoDisplay]="false">
  9.     <div>
  10.         <input type="text" pInputText placeholder="Search">
  11.         <button pButton label="Logout" icon="fa fa-sign-out" style="margin-left:.25em"></button>
  12.     </div>
  13. </p-menubar>
  14.  
  2. export class MenubarDemo {
  4.     items: MenuItem[];
  6.     ngOnInit() {
  7.         this.items = [
  8.             {
  9.                 label: 'File',
  10.                 icon: 'pi pi-fw pi-file',
  11.                 items: [{
  12.                         label: 'New', 
  13.                         icon: 'pi pi-fw pi-plus',
  14.                         items: [
  15.                             {label: 'Project'},
  16.                             {label: 'Other'},
  17.                         ]
  18.                     },
  19.                     {label: 'Open'},
  20.                     {separator:true},
  21.                     {label: 'Quit'}
  22.                 ]
  23.             },
  24.             {
  25.                 label: 'Edit',
  26.                 icon: 'pi pi-fw pi-pencil',
  27.                 items: [
  28.                     {label: 'Delete', icon: 'pi pi-fw pi-trash'},
  29.                     {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
  30.                 ]
  31.             },
  32.             {
  33.                 label: 'Help',
  34.                 icon: 'pi pi-fw pi-question',
  35.                 items: [
  36.                     {
  37.                         label: 'Contents'
  38.                     },
  39.                     {
  40.                         label: 'Search', 
  41.                         icon: 'pi pi-fw pi-search', 
  42.                         items: [
  43.                             {
  44.                                 label: 'Text', 
  45.                                 items: [
  46.                                     {
  47.                                         label: 'Workspace'
  48.                                     }
  49.                                 ]
  50.                             },
  51.                             {
  52.                                 label: 'File'
  53.                             }
  54.                     ]}
  55.                 ]
  56.             },
  57.             {
  58.                 label: 'Actions',
  59.                 icon: 'pi pi-fw pi-cog',
  60.                 items: [
  61.                     {
  62.                         label: 'Edit',
  63.                         icon: 'pi pi-fw pi-pencil',
  64.                         items: [
  65.                             {label: 'Save', icon: 'pi pi-fw pi-save'},
  66.                             {label: 'Update', icon: 'pi pi-fw pi-save'},
  67.                         ]
  68.                     },
  69.                     {
  70.                         label: 'Other',
  71.                         icon: 'pi pi-fw pi-tags',
  72.                         items: [
  73.                             {label: 'Delete', icon: 'pi pi-fw pi-minus'}
  74.                         ]
  75.                     }
  76.                 ]
  77.             },
  78.             {separator:true},
  79.             {
  80.                 label: 'Quit', icon: 'pi pi-fw pi-times'
  81.             }
  82.         ];
  83.     }
  84. }
  85.