ContextMenu Right click anywhere on this page to view the context-menu options.

Import


import {ContextMenu,MenuItem} from 'primeng/primeng';

MenuModel API

ContextMenu uses the common menumodel api to define its items, visit MenuModel API for details.

Getting Started

ContextMenu requires nested menuitems as its model.


<p-contextMenu [model]="items"></p-contextMenu>


export class ContextMenuDemo {

    private items: MenuItem[];

    ngOnInit() {
        this.items = [
            {
                label: 'File',
                items: [{
                        label: 'New', 
                        icon: 'fa-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {label: 'Quit'}
                ]
            },
            {
                label: 'Edit',
                icon: 'fa-edit',
                items: [
                    {label: 'Undo', icon: 'fa-mail-forward'},
                    {label: 'Redo', icon: 'fa-mail-reply'}
                ]
            }
        ];
    }
}

Attributes

Name Type Default Description
model array null An array of menuitems.
global boolean false Attaches the menu to document instead of a particular item.
style string null Inline style of the component.
styleClass string null Style class of the component.

Methods

Name Parameters Description
toggle event: browser event Toggles the visibility of the popup menu.
show event: browser event Displays the popup menu.
hide - Hides the popup menu.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-contextmenu Container element.
ui-menu-list List element.
ui-menuitem Menuitem element.
ui-menuitem-text Label of a menuitem.
ui-menuitem-icon Icon of a menuitem.
ui-submenu-icon Arrow icon of a submenu.

Dependencies

Native component that requires the css of PrimeUI ContextMenu.


<p-contextMenu [model]="items"></p-contextMenu>


export class ContextMenuDemo {

    private items: MenuItem[];

    ngOnInit() {
        this.items = [
            {
                label: 'File',
                icon: 'fa-file-o',
                items: [{
                        label: 'New', 
                        icon: 'fa-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {label: 'Quit'}
                ]
            },
            {
                label: 'Edit',
                icon: 'fa-edit',
                items: [
                    {label: 'Undo', icon: 'fa-mail-forward'},
                    {label: 'Redo', icon: 'fa-mail-reply'}
                ]
            },
            {
                label: 'Help',
                icon: 'fa-question',
                items: [
                    {
                        label: 'Contents'
                    },
                    {
                        label: 'Search', 
                        icon: 'fa-search', 
                        items: [
                            {
                                label: 'Text', 
                                items: [
                                    {
                                        label: 'Workspace'
                                    }
                                ]
                            },
                            {
                                label: 'File'
                            }
                    ]}
                ]
            },
            {
                label: 'Actions',
                icon: 'fa-gear',
                items: [
                    {
                        label: 'Edit',
                        icon: 'fa-refresh',
                        items: [
                            {label: 'Save', icon: 'fa-save'},
                            {label: 'Update', icon: 'fa-save'},
                        ]
                    },
                    {
                        label: 'Other',
                        icon: 'fa-phone',
                        items: [
                            {label: 'Delete', icon: 'fa-minus'}
                        ]
                    }
                ]
            },
            {
                label: 'Quit', icon: 'fa-minus'
            }
        ];
    }
}