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:


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';

   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":"Mobile Bill","link":"#"},
       {"title":"Home and Kitchen","link":"#",
       {"title":"Car and Bike Accessories","link":"#",
                     {"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){

Configuration Settings

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.

Related Posts


Animated Calendar UI Design Using HTML CSS JavaScript

Calendar UI design with dark mode and animations using HTML CSS JavaScript. An elegant, animated, and lightweight (or bold) calendar user interface design implemented in HTML, JS,…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


A Lightweight and Customizable WYSIWYG Editor In Pure JavaScript | SunEditor

WYSIWYG HTML editor based on pure JavaScript, suneditor is a lightweight, versatile, customizable, pure JavaScript WYSIWYG textual content(text) editor in your web functions. Key Features:  Paste from…


Vue.js Directive To Lock Body Scroll Without Breaking Scroll

v-scroll-lock is a Vue.js directive to lock body scrolling (for iOS mobile and tablet, Android and Safari/Chrome/Firefox for desktop) without breaking the scrolling of the target element….


Jquery Plugin To Adjusting Text Color To Background Color

Adjust-Text-To-Background.js is a jQuery plugin to set the text color to the background color. If the background color is brighter, the script will change the text color…