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.


<p-panelMenu [model]="items" styleClass="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.


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

Controlled #

Menu items can be controlled programmatically.


<p-button label="Toggle All" [text]="true" (onClick)="toggleAll()" />
<p-panelMenu [model]="items" styleClass="w-full md:w-20rem" />

Template #

PanelMenu requires a collection of menuitems as its model.


<p-panelMenu [model]="items" styleClass="w-full md:w-20rem">
    <ng-template pTemplate="item" let-item>
        <a pRipple class="flex align-items-center px-3 py-2 cursor-pointer">
            <i [class]="item.icon + ' text-primary'"></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-1 surface-border 
            border-round surface-100 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.


<p-toast />
<p-panelMenu [model]="items" styleClass="w-full md:w-20rem" />

Router #

Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.

Router
Programmatic
External

<p-panelMenu [model]="items" styleClass="w-full md:w-20rem">
    <ng-template pTemplate="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 text-color">{{ 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 align-items-center cursor-pointer text-color px-3 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>

Style #

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-menu-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 #

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.
PrimeNG 17.18.12 by PrimeTek