Menu - PanelMenu PanelMenu is a hybrid of accordion-tree components.
File
Edit
Help
Actions

Import


import {PanelMenu} from 'primeng/primeng';

Getting Started

An accordion submenu is defined using a pair of divs that represent header and content. In content div, a nested list element specifies the tree items.


<p-panelMenu [style]="{'width':'300px'}">
    <div>
        <div><a data-icon="fa-file-o"><span>File</span></a></div>
        <div>
            <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>
        </div>
    </div>
</p-panelMenu>

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.

Styling

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

Name Element
ui-panelmenu Container element.
ui-panelmenu-header Accordion header of root submenu.
ui-panelmenu-content Accordion content of root submenu.
ui-menu-list List element.
ui-menuitem Menuitem element.
ui-menuitem-text Label of a menuitem.
ui-menuitem-icon Icon of a menuitem.
ui-panelmenu-icon Arrow icon of an accordion header.

Dependencies

PrimeUI PanelMenu.


<p-panelMenu style="width:300px">
    <div>
        <div><a data-icon="fa-file-o"><span>File</span></a></div>
        <div>
            <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>
        </div>
    </div>
    <div>
        <div><a data-icon="fa-edit"><span>Edit</span></a></div>
        <div>
            <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>
        </div>
    </div>
    <div>
        <div><a data-icon="fa-question"><span>Help</span></a></div>
        <div>
            <ul>
                <li><a><span>Contents</span></a></li>
                <li><a data-icon="fa-search"><span>Search</span></a>
                    <ul>
                        <li><a><span>Text</span></a>
                            <ul>
                                <li><a><span>Workspace</span></a></li>
                            </ul>
                        </li>
                        <li><a><span>File</span></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div>
        <div><a data-icon="fa-gear"><span>Actions</span></a></div>
        <div>
            <ul>
                <li><a data-icon="fa-pencil"><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"><span>Other</span></a>
                    <ul>
                        <li><a data-icon="fa-minus"><span>Delete</span></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</p-panelMenu>