Slide Menu SlideMenu displays submenus with slide animation.

Default

Popup

Import


import {SlideMenuModule} from 'primeng/slidemenu';
import {MenuItem} from 'primeng/api';

MenuModel API

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

Getting Started

SlideMenu requires nested menuitems as its model.


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


export class SlideMenuDemo {

    items: MenuItem[];

    ngOnInit() {
        this.items = [
            {
                label: 'File',
                items: [{
                        label: 'New', 
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {label: 'Quit'}
                ]
            },
            {
                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'}
                ]
            }
        ];
    }
}

Popup Mode

SlideMenu is inline by default, popup mode is also supported by enabling popup property and calling toggle method by passing the event from the anchor element.


<p-slideMenu #menu [model]="items" [popup]="true"></p-slideMenu>
<button #btn type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>

Effects

The easing function to use is "ease-out" by default and this can be customized using easing property. See here for possible alternative values.


<p-slideMenu #menu [model]="items" effectDuration="1000" easing="ease-in"></p-slideMenu>

Properties

Name Type Default Description
model array null An array of menuitems.
popup boolean false Defines if menu would displayed as a popup.
style string null Inline style of the component.
styleClass string null Style class of the component.
easing string ease-out Easing animation to use for sliding.
effectDuration any 250 Duration of the sliding animation in milliseconds.
backLabel string Back Label of element to navigate back.
menuWidth number 180 Width of the submenus.
viewportHeight number 175 Height of the scrollable area, a scrollbar appears if a menu height is longer than this value.
appendTo any null Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.
baseZIndex number 0 Base zIndex value to use in layering.
autoZIndex boolean true Whether to automatically manage layering.

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-slidemenu Container element.
ui-slidemenu-wrapper Wrapper of content.
ui-slidemenu-content Content element.
ui-slidemenu-backward Element to navigate to previous menu on click.
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

None.

View on GitHub

<h3 class="first">Default</h3>
<p-slideMenu [model]="items" [viewportHeight]="250"></p-slideMenu>

<h3>Popup</h3>
<p-slideMenu #menu [model]="items" [popup]="true" [viewportHeight]="250"></p-slideMenu>
<button #btn type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)"></button>


export class SlideMenuDemo {

    items: MenuItem[];

    ngOnInit() {
        this.items = [
            {
                label: 'File',
                icon: 'pi pi-fw pi-file',
                items: [{
                        label: 'New', 
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {separator:true},
                    {label: 'Quit'}
                ]
            },
            {
                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'
                    },
                    {
                        label: 'Search', 
                        icon: 'pi pi-fw pi-search', 
                        items: [
                            {
                                label: 'Text', 
                                items: [
                                    {
                                        label: 'Workspace'
                                    }
                                ]
                            },
                            {
                                label: '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'}
                        ]
                    }
                ]
            },
            {separator:true},
            {
                label: 'Quit', icon: 'pi pi-fw pi-times'
            }
        ];
    }
}