PanelMenu

PanelMenu is a hybrid of accordion-tree components.


import { PanelMenu } from 'primereact/panelmenu';
         

PanelMenu requires a collection of menuitems as its model.


<PanelMenu model={items} className="w-full md:w-25rem" />   
 

Only one single root menuitem can be active by default, enable multiple property to be able to open more than one items.


<PanelMenu model={items} className="w-full md:w-25rem" />   
 

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

NameElement
p-panelmenuContainer element.
p-panelmenu-headerAccordion header of root submenu.
p-panelmenu-contentAccordion content of root submenu.
p-submenu-listList element.
p-menuitemMenuitem element.
p-menuitem-textLabel of a menuitem.
p-menuitem-iconIcon of a menuitem.
p-panelmenu-iconArrow icon of an accordion header.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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

KeyFunction
tabAdds focus to the first header when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence.
enterToggles the visibility of the content.
spaceToggles the visibility of the content.
down arrowIf panel is collapsed then moves focus to the next header, otherwise first treenode of the panel receives the focus.
up arrowIf previous panel is collapsed then moves focus to the previous header, otherwise last treenode of the previous panel receives the focus.
homeMoves focus to the first header.
endMoves focus to the last header.

Tree Keyboard Support

KeyFunction
tabMoves focus to the next focusable element in the page tab order.
shift + tabMoves focus to the previous focusable element in the page tab order.
enterActivates the focused treenode.
spaceActivates the focused treenode.
down arrowMoves focus to the next treenode.
up arrowMoves focus to the previous treenode.
right arrowIf node is closed, opens the node otherwise moves focus to the first child node.
left arrowIf node is open, closes the node otherwise moves focus to the parent node.
Visit the API documentation for detailed information about all the properties, events and methods of the component.