PanelMenu is a hybrid of accordion-tree components.
import PanelMenu from 'primevue/panelmenu';
PanelMenu requires a collection of menuitems as its model.
<PanelMenu :model="items" />
If the menuitem has a key defined, PanelMenu state can be controlled programmatically with the expandedKeys property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that expandedKeys also supports two-way binding with the v-model directive.
<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />
Only one single root menuitem can be active by default, enable expandedKeys property to be able to open more than one items.
<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-panelmenu | Container element. |
| p-panelmenu-panel | Submenu container. |
| p-toggleable-content | Accordion content of root submenu. |
| p-panelmenu-header | Accordion header of root submenu. |
| p-panelmenu-header-content | Content of accordion header. |
| p-panelmenu-header-action | Action of accordion header. |
| p-submenu-list | List element. |
| p-menuitem | Menuitem element. |
| p-menuitem-text | Label of a menuitem. |
| p-menuitem-icon | Icon of a menuitem. |
| p-submenu-icon | Arrow icon of an accordion header. |
Accordion header elements have a button role, an aria-label defined using the label property of the menuitem model and aria-controls to define the id of the content section along with aria-expanded for the visibility state.
The content of an accordion panel uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header.
The tree elements has a tree as the role and each menu item has a treeitem role along with aria-label, aria-selected and aria-expanded attributes. The container element of a treenode has the group role. The aria-setsize, aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem.
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element in the page tab sequence. |
| shift + tab | Moves focus to the previous the focusable element in the page tab sequence. |
| enter | Toggles the visibility of the content. |
| space | Toggles the visibility of the content. |
| down arrow | Moves focus to the next header. If focus is on the last header, moves focus to the first header. |
| up arrow | Moves focus to the previous header. If focus is on the first header, moves focus to the last header. |
| home | Moves focus to the first header. |
| end | Moves focus to the last header. |