Press "Enter" to skip to content

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

Propertytypedescriptiondefault
animationstringname of the hamburger animation. Refer to the below list of supported animation typescollapse
offsetobject “offset”: {“top”: 55}The offset value of the menu from top, left, right and bottom0
closeOnCLickbooleanTo 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


See Demo And Download

Official Website(CuppaLabs): Click Here

This superior jQuery/javascript plugin is developed by CuppaLabs. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.