PanelMenu is a hybrid of Accordion and Tree components.
import { PanelMenuModule } from 'primeng/panelmenu';
PanelMenu requires a collection of menuitems as its model.
<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
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"></p-panelMenu>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-panelmenu | Container element. |
p-panelmenu-header | Accordion header of root submenu. |
p-panelmenu-content | Accordion content of root submenu. |
p-menu-list | List element. |
p-menuitem | Menuitem element. |
p-menuitem-text | Label of a menuitem. |
p-menuitem-icon | Icon of a menuitem. |
p-panelmenu-icon | Arrow icon of an accordion header. |
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. |
API defines helper props, events and others for the PrimeNG PanelMenu module.
Name | Type | Default | Description |
---|---|---|---|
model | array | null | An array of menuitems. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
multiple | boolean | true | Whether multiple tabs can be activated at the same time or not. |
transitionOptions | string | 400ms cubic-bezier(0.86, 0, 0.07, 1) | Transition options of the animation. |
Name | Parameters |
---|---|
submenuicon | - |
MenuItem provides the following properties. Note that not all of them may be utilized by the panelmenu component.
Name | Type | Default | Description |
---|---|---|---|
id | string | null | Identifier of the element. |
label | string | null | Text of the item. |
icon | string | null | Icon of the item. |
iconStyle | object | null | Inline style of the item's icon. |
command | function | null | Callback to execute when item is clicked. |
url | string | null | External link to navigate when item is clicked. |
routerLink | array | null | RouterLink definition for internal navigation. |
routerLinkActiveOptions | object | null | Configuration for active router link. |
queryParams | object | null | Query parameters for internal navigation via routerLink. |
fragment | string | null | Sets the hash fragment for the URL. |
queryParamsHandling | QueryParamsHandling | null | How to handle query parameters in the router link for the next navigation. One of: merge : Merge new with current parameters. preserve : Preserve current parameters.k. |
preserveFragment | boolean | false | When true, preserves the URL fragment for the next navigation. |
skipLocationChange | boolean | null | When true, navigates without pushing a new state into history. |
replaceUrl | boolean | null | When true, navigates while replacing the current state in history. |
state | object | null | Developer-defined state that can be passed to any navigation. |
items | array | null | An array of children menuitems. |
expanded | boolean | false | Visibility of submenu. |
disabled | boolean | false | When set as true, disables the menuitem. |
visible | boolean | true | Whether the dom element of menuitem is created or not. |
target | string | null | Specifies where to open the linked document. |
escape | boolean | true | Whether to escape the label or not. Set to false to display html content. |
separator | boolean | false | Defines the item as a separator. |
style | object | null | Inline style of the menuitem. |
styleClass | string | null | Style class of the menuitem. |
badge | string | null | Value of the badge. |
badgeStyleClass | string | null | Style class of the badge. |
title | string | null | Tooltip text of the item. |
automationId | any | null | Value of HTML data-* attribute. |
tabindex | string | 0 | Specifies tab order of the item. |
tooltipOptions | TooltipOptions | - | Options of the item's tooltip. |