import {PanelMenu} from 'primeng/primeng';
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>
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. |
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. |
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>