PanelMenu is a hybrid of Accordion and Tree components.
import { PanelMenu } from 'primeng/panelmenu';
PanelMenu requires a collection of menuitems as its model.
<p-panelmenu [model]="items" styleClass="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.
<p-panelmenu [model]="items" [style]="{'width':'300px'}" [multiple]="true" />
Menu items can be controlled programmatically.
<p-button label="Toggle All" [text]="true" (onClick)="toggleAll()" />
<p-panelmenu [model]="items" styleClass="w-full md:w-80" />
PanelMenu requires a collection of menuitems as its model.
<p-panelMenu [model]="items" styleClass="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>
The command property defines the callback to run when an item is activated by click or a key event.
<p-toast />
<p-panelmenu [model]="items" styleClass="w-full md:w-80" />
Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.
<p-panelMenu [model]="items" styleClass="w-full md:w-80">
<ng-template #item let-item>
<ng-container *ngIf="item.route; else urlRef">
<a [routerLink]="item.route" class="flex align-items-center
cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
</a>
</ng-container>
<ng-template #urlRef>
<a *ngIf="item.url; else noLink" [href]="item.url" class="flex align-items-center
cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
</a>
<ng-template #noLink>
<span class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
<i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
</span>
</ng-template>
</ng-template>
</ng-template>
</p-panelMenu>
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. |