Slide Menu

SlideMenu displays submenus with a slide animation.

Basic

Back

Popup

Import via Module


import { SlideMenu } from 'primereact/slidemenu';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/slidemenu/slidemenu.min.js"></script>

MenuItem API

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

Getting Started

Menu requires a collection of menuitems as its model.


const items = [
    {
       label:'File',
       icon:'pi pi-fw pi-file',
       items:[
          {
             label:'New',
             icon:'pi pi-fw pi-plus',
             items:[
                {
                   label:'Bookmark',
                   icon:'pi pi-fw pi-bookmark'
                },
                {
                   label:'Video',
                   icon:'pi pi-fw pi-video'
                },

             ]
          },
          {
             label:'Delete',
             icon:'pi pi-fw pi-trash'
          },
          {
             separator:true
          },
          {
             label:'Export',
             icon:'pi pi-fw pi-external-link'
          }
       ]
    },
    {
       label:'Edit',
       icon:'pi pi-fw pi-pencil',
       items:[
          {
             label:'Left',
             icon:'pi pi-fw pi-align-left'
          },
          {
             label:'Right',
             icon:'pi pi-fw pi-align-right'
          },
          {
             label:'Center',
             icon:'pi pi-fw pi-align-center'
          },
          {
             label:'Justify',
             icon:'pi pi-fw pi-align-justify'
          },

       ]
    },
    {
       label:'Users',
       icon:'pi pi-fw pi-user',
       items:[
          {
             label:'New',
             icon:'pi pi-fw pi-user-plus',

          },
          {
             label:'Delete',
             icon:'pi pi-fw pi-user-minus',

          },
          {
             label:'Search',
             icon:'pi pi-fw pi-users',
             items:[
                {
                   label:'Filter',
                   icon:'pi pi-fw pi-filter',
                   items:[
                      {
                         label:'Print',
                         icon:'pi pi-fw pi-print'
                      }
                   ]
                },
                {
                   icon:'pi pi-fw pi-bars',
                   label:'List'
                }
             ]
          }
       ]
    },
    {
       label:'Events',
       icon:'pi pi-fw pi-calendar',
       items:[
          {
             label:'Edit',
             icon:'pi pi-fw pi-pencil',
             items:[
                {
                   label:'Save',
                   icon:'pi pi-fw pi-calendar-plus'
                },
                {
                   label:'Delete',
                   icon:'pi pi-fw pi-calendar-minus'
                },

             ]
          },
          {
             label:'Archieve',
             icon:'pi pi-fw pi-calendar-times',
             items:[
                {
                   label:'Remove',
                   icon:'pi pi-fw pi-calendar-minus'
                }
             ]
          }
       ]
    },
    {
       separator:true
    },
    {
       label:'Quit',
       icon:'pi pi-fw pi-power-off'
    }
];


<SlideMenu model={items} />

Popup Mode

SlideMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.


<SlideMenu ref={menu} model={items} popup />

<Button type="button" icon="pi pi-bars" label="Show" onClick={(event) => menu.current.toggle(event)}></Button>

Effects

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


<SlideMenu model={items} effectDuration={1000} easing="ease-in" />

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
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.
className	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	190	Width of the submenus.
viewportHeight	number	175	Height of the scrollable area, a scrollbar appears if a menu height is longer than this value.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
appendTo	DOM element \| string	document.body	DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
transitionOptions	object	null	The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

Methods

Name	Parameters	Description
toggle	event: Browser event	Toggles the visibility of the popup menu.
show	event: Browser event	Displays the popup menu.
hide	event: Browser event	Hides the popup menu.
navigateForward	void	Navigates the slide menu forward.
navigateBack	void	Navigates the slide menu backwards.
setLevelState	level: Number of the menu to set	Navigates the slide menu to this specific level.

Events

Name	Parameters	Description
onShow	event: Browser event	Callback to invoke when a popup menu is shown.
onHide	event: Browser event	Callback to invoke when a popup menu is hidden.
onNavigate	level: number	Callback to invoke when a menu is navigated to.

Styling

Following is the list of structural style classes.

Name	Element
p-slidemenu	Container element.
p-slidemenu-wrapper	Wrapper of content.
p-slidemenu-content	Content element.
p-slidemenu-backward	Element to navigate to previous menu on click.
p-menu-list	List element.
p-menuitem	Menuitem element.
p-menuitem-text	Label of a menuitem.
p-menuitem-icon	Icon of a menuitem.
p-submenu-icon	Arrow icon of a submenu.