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.
PanelMenu is a hybrid of Accordion and Tree components.
Defines the input properties of the component.
name | type | default | description | ||
---|---|---|---|---|---|
MenuItem[] | |||||
Object | |||||
string | |||||
boolean | |||||
string | |||||
string | |||||
number |
Defines methods that can be accessed by the component's reference.
name | parameters | description | |
---|---|---|---|
null |
Defines the templates used by the component.
name | parameters | description | |
---|---|---|---|
null |
Defines the custom interfaces used by the module.
MenuItem provides the following properties. Note that not all of them may be utilized by the tabmenu component.
name | type | description |
---|---|---|
string | ||
string | ||
- | ||
string | ||
MenuItem[] | ||
boolean | ||
boolean | ||
boolean | ||
string | ||
boolean | ||
any | ||
boolean | ||
string | ||
string | ||
string | ||
string | ||
Object | ||
string | ||
string | ||
string | ||
any | ||
string | ||
any | ||
Object | ||
string | ||
QueryParamsHandling | ||
boolean | ||
boolean | ||
boolean | ||
Object | ||
string | ||
Object | ||
TooltipOptions |