SlideMenu is a component which displays sub-menus with slide animation effects. This kind of slide menu component is the best example of iPod style menu widgets. By default, the slide menu is displayed as an inline menu component. A basic slide menu example which displays a document or file type menu would be as follows:

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

The list of menu items needs to be organized with in a component class. For example, a root menu item titled File will have nested items as shown here:

this.items = [
  {
    label: 'File',
    icon: 'fa-file-o',
    items: [
    {
      label: 'New',
      icon: 'fa-plus',
      items: [
        {label: 'Project'},
        {label: 'Other'},
      ]
    },
    {label: 'Open'},
    {label: 'Quit'}
    ]
  },
  // more items ...
]

The following screenshot shows a snapshot result of the basic slide menu, which displays file menu items on the click of the File menu item as an example:

As seen in the preceding snapshot, the slide menu is displayed in an inline format. It will be displayed in pop-up mode by enabling the popup property. At the bottom of the slide menu popup, a back button appears with the Back label, but this can also be customized using the backLabel property.

The slide menu is accessed using API methods such as toggle, show, and hide methods. The slide menu provides various animation effects with the default effect easing-out. This default behavior can changed using the effect property. Similarly, the default effect duration of a slide menu is 500 milliseconds, but this can be customized using the effectDuration property.

The dimensions for any visual component is much needed and must be configured. Considering this standard, dimensions of Menu dimensions are configurable. The sub-menu width is controlled through the menuWidth property, which defaults to 180 (normally measured in pixels). Also the height of the scrollable area is controlled through the viewportHeight property with a default value of 175 pixels (that is, the scroll bar appears if the menu height is more than this default value).