📄 primeng/panelmenu

File: panelmenu.md | Updated: 11/15/2025

Source: https://primeng.org/panelmenu

PassThrough Attributes just landed ✅Learn More

  • SearchK

  • Primary

    Surface

    PresetsAuraMaterialLaraNora

    Ripple

    RTL

  • v20

  • FEATURES

  • API

  • THEMING

  • PASSTHROUGH

PanelMenu

PanelMenu is a hybrid of Accordion and Tree components.

Import #

import { PanelMenuModule } from 'primeng/panelmenu';

Basic #

PanelMenu requires a collection of menuitems as its model.

Files

  • Documents

  • Images

Cloud

  • Upload

  • Download

  • Sync

Devices

  • Phone

  • Desktop

  • Tablet

<p-panelmenu [model]="items" class="w-full md:w-20rem" />

Multiple #

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

Files

  • Documents

  • Images

Cloud

  • Upload

  • Download

  • Sync

Devices

  • Phone

  • Desktop

  • Tablet

<p-panelmenu [model]="items" [style]="{'width':'300px'}" [multiple]="true" />

Controlled #

Menu items can be controlled programmatically.

Toggle All

Users

  • New

  • Search

Tasks

  • Add New

  • Pending

  • Overdue

Calendar

  • New Event

  • Today

  • This Week

<p-button label="Toggle All" [text]="true" (onClick)="toggleAll()" /> <p-panelmenu [model]="items" class="w-full md:w-80" />

Template #

PanelMenu requires a collection of menuitems as its model.

Mail5

  • Compose⌘+N

  • Inbox5

  • Sent⌘+S

  • Trash⌘+T

Reports⌘+R

  • Sales3

  • Products6

Profile⌘+W

  • Settings⌘+O

  • Privacy⌘+P

<p-panelmenu [model]="items" class="w-full md:w-80"> <ng-template #item let-item> <a pRipple class="flex items-center px-4 py-2 cursor-pointer group"> <i [class]="item.icon + ' text-primary group-hover:text-inherit'"></i> <span class="ml-2"> {{ item.label }} </span> <p-badge *ngIf="item.badge" class="ml-auto" [value]="item.badge" /> <span *ngIf="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1"> {{ item.shortcut }} </span> </a> </ng-template> </p-panelmenu>

Command #

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

Files

  • New

  • Search

  • Print

Sync

  • Import

  • Export

Sign Out

<p-toast /> <p-panelmenu [model]="items" class="w-full md:w-80" />

Router #

Menu items support navigation via routerLink, programmatic routing using commands, or external URLs.

Router

Programmatic

External

<p-panelmenu [model]="items" class="w-full md:w-80" />

Accessibility #

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

| 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. |

Tree Keyboard Support

| 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

Templates

Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.

Learn More

PrimeNG 20.3.0 by PrimeTek