import {Menubar} from 'primeng/primeng';
Menubar requires nested list elements.
<p-menubar> <ul> <li> <a data-icon="fa-file-o"><span>File</span></a> <ul> <li><a data-icon="fa-plus"><span>New</span></a> <ul> <li><a><span>Project</span></a></li> <li><a><span>Other</span></a></li> </ul> </li> <li><a><span>Open</span></a></li> <li><a><span>Quit</span></a></li> </ul> </li> <li> <a data-icon="fa-edit">Edit</a> <ul> <li><a data-icon="fa-mail-forward"><span>Undo</span></a></li> <li><a data-icon="fa-mail-reply"><span>Redo</span></a></li> </ul> </li> </ul> </p-menubar>
Menubar submenus are displayed on hover by default, enable autoDisplay property to require a click to open a submenu initially. In this mode, until outside of menubar is clicked, menu goes in activated mode and submenus can be displayed using mouseover.
An icon of a menuitem is defined using data-icon attribute.
<a data-icon="fa-plus"><span>New</span></a>
Name | Type | Default | Description |
---|---|---|---|
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
autoDisplay | boolean | false | Displays submenus with mouseover, set to false to require a click to activate the menu. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-menubar | Container element. |
ui-menu-list | List element. |
ui-menuitem | Menuitem element. |
ui-menuitem-text | Label of a menuitem. |
ui-menuitem-icon | Icon of a menuitem. |
ui-submenu-icon | Arrow icon of a submenu. |
PrimeUI Menubar.
<h3 class="first">Default</h3> <p-menubar> <ul> <li> <a data-icon="fa-file-o"><span>File</span></a> <ul> <li><a data-icon="fa-plus"><span>New</span></a> <ul> <li><a><span>Project</span></a></li> <li><a><span>Other</span></a></li> </ul> </li> <li><a><span>Open</span></a></li> <li><a><span>Quit</span></a></li> </ul> </li> <li> <a data-icon="fa-edit">Edit</a> <ul> <li><a data-icon="fa-mail-forward"><span>Undo</span></a></li> <li><a data-icon="fa-mail-reply"><span>Redo</span></a></li> </ul> </li> <li> <a data-icon="fa-question">Help</a> <ul> <li><a><span>Contents</span></a></li> <li> <a data-icon="fa-search"><span>Search</span></a> <ul> <li><a>Text</a> <ul> <li><a><span>Workspace</span></a></li> </ul> </li> <li><a><span>File</span></a></li> </ul> </li> </ul> </li> <li> <a data-icon="fa-gear">Actions</a> <ul> <li><a data-icon="fa-refresh"><span>Edit</span></a> <ul> <li><a data-icon="fa-save"><span>Save</span></a></li> <li><a data-icon="fa-save"><span>Update</span></a></li> </ul> </li> <li><a data-icon="fa-phone">Other</a> <ul> <li><a data-icon="fa-minus"><span>Delete</span></a></li> </ul> </li> </ul> </li> <li> <a data-icon="fa-close"><span>Quit</span></a> </li> </ul> </p-menubar> <h3>Click to Display</h3> <p-menubar [autoDisplay]="false"> <ul> <li> <a data-icon="fa-file-o"><span>File</span></a> <ul> <li><a data-icon="fa-plus"><span>New</span></a> <ul> <li><a><span>Project</span></a></li> <li><a><span>Other</span></a></li> </ul> </li> <li><a><span>Open</span></a></li> <li><a><span>Quit</span></a></li> </ul> </li> <li> <a data-icon="fa-edit">Edit</a> <ul> <li><a data-icon="fa-mail-forward"><span>Undo</span></a></li> <li><a data-icon="fa-mail-reply"><span>Redo</span></a></li> </ul> </li> <li> <a data-icon="fa-question">Help</a> <ul> <li><a><span>Contents</span></a></li> <li> <a data-icon="fa-search"><span>Search</span></a> <ul> <li><a>Text</a> <ul> <li><a><span>Workspace</span></a></li> </ul> </li> <li><a><span>File</span></a></li> </ul> </li> </ul> </li> <li> <a data-icon="fa-gear">Actions</a> <ul> <li><a data-icon="fa-refresh"><span>Edit</span></a> <ul> <li><a data-icon="fa-save"><span>Save</span></a></li> <li><a data-icon="fa-save"><span>Update</span></a></li> </ul> </li> <li><a data-icon="fa-phone">Other</a> <ul> <li><a data-icon="fa-minus"><span>Delete</span></a></li> </ul> </li> </ul> </li> <li> <a data-icon="fa-close"><span>Quit</span></a> </li> </ul> </p-menubar>