Simple, easily customizable, animated sidebar menu in angular 7+

Simple sidenav is a simple, easily customizable, animated menu, with the possibility of infinite nesting that was built specifically for Angular apps.
Simple, easily customizable, animated sidebar menu in angular 7+


Install Plugin via NPM

npm install simple-sidenav --save


# app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SimpleSidenavModule } from 'simple-sidenav';
  declarations: [
  imports: [
  bootstrap: [AppComponent]
export class AppModule { }


# app.component.ts
import { Component } from '@angular/core';
import { SimpleMenu } from 'simple-sidenav';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {
  menu: SimpleMenu[] = [...];
  animation: SimpleAnimation = {
    in: { value: 'slide-in-stagger' },
    out: { value: 'slide-out', duration: 200 }
  onClick(item: {id: number|string, name: string, icon: string, index: number}) {


# app.component.html

Menu Example

menu: SimpleMenu[] = [
  { "id": "1", "name": "Ruby on Rails", "icon": "assets/images/rails.png", "menu": [
    { "id": "1", "name": "Models", "menu": [
      { "id": "1", "name": "Active Record Basics" },
      { "id": "2", "name": "Active Record Migrations" },
      { "id": "3", "name": "Active Record Validations" },
      { "id": "4", "name": "Active Record Callbacks" },
      { "id": "5", "name": "Active Record Associations" },
      { "id": "6", "name": "Active Record Query Interface", "menu": [...] }
    ] },
    ] },
  { "id": "2", "name": "Angular", "icon": "assets/images/angular.png", "menu": [...] },

List of properties you can use to customize the plugin

Props Default value Interface Description Required
[menu] none SimpleMenu[] See example above. true
[animation] false SimpleAnimation Pass object with animation name. See example above. false
(onSidenav) ---- -------- Pass callback function to listen for sidenav clicks. $event contains an id and index of the clicked element. false
[animate] false boolean Set to true if you want to animate the first appearance of the sidenav. false
[withArrow] true boolean Set to false if you want to hide an arrow icon. false
[activeID] none string Pass an ID of menu item if you want it to be opened by default. false

See live demo and download source code.


This awesome plugin is developed by codica2. Visit their official github repository for more information and follow for future updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.