File: panelmenu.md | Updated: 11/15/2025
Introducing PrimeReact v11 Alpha 🥁Learn More
SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH
PanelMenu is a hybrid of accordion-tree components.
Import#
import { PanelMenu } from 'primereact/panelmenu';
Copy
Basic#
PanelMenu requires a collection of menuitems as its model.
<PanelMenu model={items} className="w-full md:w-20rem" />
Copy
Multiple#
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" />
Copy
Controlled#
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.
Toggle All
<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 />
</div>
Copy
Template#
PanelMenu offers item customization with the items template property that receives the item instance and returns an element.
Mail5
Reports⌘+R
Profile⌘+W
<PanelMenu model={items} className="w-full md:w-20rem" />
Copy
Command#
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} />
Copy
Router#
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" />
Copy
Accessibility#
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 | Adds 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. | | enter | Toggles the visibility of the content. | | space | Toggles the visibility of the content. | | down arrow | If panel is collapsed then moves focus to the next header, otherwise first treenode of the panel receives the focus. | | up arrow | If previous panel is collapsed then moves focus to the previous header, otherwise last treenode of the previous panel receives the focus. | | home | Moves focus to the first header. | | end | Moves focus to the last header. |
| Key | Function | | --- | --- | | tab | Moves focus to the next focusable element in the page tab order. | | shift + tab | Moves focus to the previous focusable element in the page tab order. | | enter | Activates the focused treenode. | | space | Activates the focused treenode. | | down arrow | Moves focus to the next treenode. | | up arrow | Moves focus to the previous treenode. | | right arrow | If node is closed, opens the node otherwise moves focus to the first child node. | | left arrow | If node is open, closes the node otherwise moves focus to the parent node. |
Import
Basic
Multiple
Controlled
Template
Command
Router
Accessibility
PrimeReact 10.9.7 by PrimeTek