Angular Slide Menu Navigation Component for Mobile and Web

cuppa-ng2-slidemenu is a slide hamburger angular navigation menu component for mobile and web. Requires Font Awesome.

angular navbar example, angular navbar responsive, angular material hamburger menu, angular sidebar menu with submenu example, angular bootstrap sidebar menu collapse

Supported animations list :

3dx
3dx-r
3dy
3dy-r
3dxy
3dxy-r
arrow
arrow-r
arrowalt
arrowalt-r
arrowturn
arrowturn-r
boring
collapse
collapse-r
elastic
elastic-r
emphatic
emphatic-r
minus
slider
slider-r
spin
spin-r
spring
spring-r
stand
stand-r
squeeze
vortex
vortex-r

How to make use of it:

Installation:

npm install cuppa-ng2-slidemenu

1. Once installed, import SlideMenuModule from the installed package into your module as follows:

import { SlideMenuModule } from 'cuppa-ng2-slidemenu/cuppa-ng2-slidemenu';

2. Import SlideMenuModule into your ngModule as follows:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SlideMenuModule } from 'cuppa-ng2-slidemenu/cuppa-ng2-slidemenu';
import { AppComponent } from './app.component';

@NgModule({
   bootstrap: [ AppComponent ],
   declarations: [AppComponent],
   imports: [SlideMenuModule] // Import SlideMenu module variable here 
})
export class AppModule {
}

3. Place the component HTML tag in the template where the hamburger menu should be displayed.

<cuppa-slidemenu [menulist]="menuItemsArray" (open)="onMenuOpen()" (close)="onMenuClose()" (onItemSelect)="onItemSelect($event)"></cuppa-slidemenu>

4. The component requires a List List to pass the data as an array of objects to the component, as follows:

private menuItemsArray: any[] = [ 
       {"title":"Electricity","link":"#"},
       {"title":"Mobile Bill","link":"#"},
       {"title":"Home and Kitchen","link":"#",
       "subItems":[
                   {"title":"Furniture","link":"#"},
                   {"title":"Cookware","link":"#"},
                  ]
       },
       {"title":"Car and Bike Accessories","link":"#",
        "subItems":[
                     {"title":"Tyres and Alloys","link":"#"},
                     {"title":"Comfort and Safety","link":"#"},
                    ]
       },
 ];

  public onMenuClose(){
    console.log("menu closed");
  }
  public onMenuOpen(){
    console.log("menu Opened");
  }
  private onItemSelect(item:any){
    console.log(item);
  }

Configuration Settings

Property	type	description	default
animation	string	name of the hamburger animation. Refer to the below list of supported animation types	collapse
offset	object “offset”: {“top”: 55}	The offset value of the menu from top, left, right and bottom	0
closeOnCLick	boolean	To close the menu as soo as an item is selected.	false

Callback API

onMenuClose() – This method is triggered when the menu is closed.
onMenuOpen() – Triggered when the menu is opened.
onItemSelect(item:any) – Triggered when a menu item is selected. Returns the selected menu item object.

angular side navigation menu, angular 2 side navigation menu Plugin/Github, side menu in angular