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.

p-panelmenuContainer element.
p-panelmenu-panelSubmenu container.
p-toggleable-contentAccordion content of root submenu.
p-panelmenu-headerAccordion header of root submenu.
p-panelmenu-header-contentContent of accordion header.
p-panelmenu-header-actionAction of accordion header.
p-submenu-listList element.
p-menuitemMenuitem element.
p-menuitem-textLabel of a menuitem.
p-menuitem-iconIcon of a menuitem.
p-submenu-iconArrow icon of an accordion header.

Screen Reader

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.

Header Keyboard Support

tabMoves focus to the next the focusable element in the page tab sequence.
shift + tabMoves focus to the previous the focusable element in the page tab sequence.
enterToggles the visibility of the content.
spaceToggles the visibility of the content.
down arrowMoves focus to the next header. If focus is on the last header, moves focus to the first header.
up arrowMoves focus to the previous header. If focus is on the first header, moves focus to the last header.
homeMoves focus to the first header.
endMoves focus to the last header.