Menu - PanelMenuPanelMenu is a hybrid of accordion-tree components.
Documentation
Import
import {PanelMenuModule} from 'primeng/panelmenu';
import {MenuItem} from 'primeng/api';
MenuModel API
PanelMenu uses the common menumodel api to define its items, visit MenuModel API for details.
Getting Started
PanelMenu requires nested menuitems as its model.
<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
export class PanelMenuDemo {
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'File',
icon: 'pi pi-pw pi-file',
items: [{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{label: 'User', icon: 'pi pi-fw pi-user-plus'},
{label: 'Filter', icon: 'pi pi-fw pi-filter'}
]
},
{label: 'Open', icon: 'pi pi-fw pi-external-link'},
{separator: true},
{label: 'Quit', icon: 'pi pi-fw pi-times'}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{label: 'Delete', icon: 'pi pi-fw pi-trash'},
{label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
]
},
{
label: 'Help',
icon: 'pi pi-fw pi-question',
items: [
{
label: 'Contents',
icon: 'pi pi-pi pi-bars'
},
{
label: 'Search',
icon: 'pi pi-pi pi-search',
items: [
{
label: 'Text',
items: [
{
label: 'Workspace'
}
]
},
{
label: 'User',
icon: 'pi pi-fw pi-file',
}
]}
]
},
{
label: 'Actions',
icon: 'pi pi-fw pi-cog',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{label: 'Save', icon: 'pi pi-fw pi-save'},
{label: 'Update', icon: 'pi pi-fw pi-save'},
]
},
{
label: 'Other',
icon: 'pi pi-fw pi-tags',
items: [
{label: 'Delete', icon: 'pi pi-fw pi-minus'}
]
}
]
}
];
}
}
Initial State
MenuItem has an expanded property to control the visibility of a submenu, you may use this property to control the state from the menumodel.
Animation Configuration
Transition of the toggle animation can be customized using the transitionOptions property with a default value as 400ms cubic-bezier(0.86, 0, 0.07, 1), example below disables the animation altogether.
<p-panelMenu [transitionOptions]="'0ms'" [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
Properties
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. |
Styling
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-panelmenu | Container element. |
ui-panelmenu-header | Accordion header of root submenu. |
ui-panelmenu-content | Accordion content of root submenu. |
ui-menu-list | List element. |
ui-menuitem | Menuitem element. |
ui-menuitem-text | Label of a menuitem. |
ui-menuitem-icon | Icon of a menuitem. |
ui-panelmenu-icon | Arrow icon of an accordion header. |
Dependencies
None.
Source
<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
export class PanelMenuDemo {
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'File',
icon: 'pi pi-pw pi-file',
items: [{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{label: 'User', icon: 'pi pi-fw pi-user-plus'},
{label: 'Filter', icon: 'pi pi-fw pi-filter'}
]
},
{label: 'Open', icon: 'pi pi-fw pi-external-link'},
{separator: true},
{label: 'Quit', icon: 'pi pi-fw pi-times'}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{label: 'Delete', icon: 'pi pi-fw pi-trash'},
{label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
]
},
{
label: 'Help',
icon: 'pi pi-fw pi-question',
items: [
{
label: 'Contents',
icon: 'pi pi-pi pi-bars'
},
{
label: 'Search',
icon: 'pi pi-pi pi-search',
items: [
{
label: 'Text',
items: [
{
label: 'Workspace'
}
]
},
{
label: 'User',
icon: 'pi pi-fw pi-file',
}
]}
]
},
{
label: 'Actions',
icon: 'pi pi-fw pi-cog',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{label: 'Save', icon: 'pi pi-fw pi-save'},
{label: 'Update', icon: 'pi pi-fw pi-save'},
]
},
{
label: 'Other',
icon: 'pi pi-fw pi-tags',
items: [
{label: 'Delete', icon: 'pi pi-fw pi-minus'}
]
}
]
}
];
}
}