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-20rem" />   

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-20rem" />   

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.

<div className="card flex flex-column align-items-center gap-3">
    <Button type="button" label="Toggle All" text onClick={() => toggleAll()} />
    <PanelMenu model={items} expandedKeys={expandedKeys} onExpandedKeysChange={setExpandedKeys} className="w-full md:w-20rem" multiple />

PanelMenu offers item customization with the items template property that receives the item instance and returns an element.

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

The command property defines the callback to run when an item is activated by click or a key event.

<PanelMenu model={items} className="w-full md:w-20rem" />   
<Toast ref={toast} />

Items with navigation are defined with command and url property to be able to use a router link component, an external link or programmatic navigation.

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

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

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

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.