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

Default

Click to Display

Import

import {Menubar} from 'primeng/primeng';

Getting Started

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>

AutoDisplay

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.

Icons

An icon of a menuitem is defined using data-icon attribute.

<a data-icon="fa-plus"><span>New</span></a>

Attributes

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.

Styling

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.

Dependencies

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>