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

Demos

Installation

npm install simple-sidenav --save

Usage

Module

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SimpleSidenavModule,
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component

# app.component.ts
import { Component } from '@angular/core';
import { SimpleMenu } from 'simple-sidenav';

@Component({
  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}) {
    ...
  }
}

HTML

# app.component.html
<sm-simple-sidenav
  [menu]="menu"
  [activeID]="'2'"
  [animation]="animation"
  [withArrow]="true"
  (onSidenav)="onClick($event)">
</sm-simple-sidenav>

[menu] prop 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": [...] },
  ...
]

NOTE: id must be unique, an icon is optional, a menu can contain an infinite level of nested menu

[activeID] prop example:

If you want menu to be opened by default at some position just pass an id of menu item to [activeID] prop.

[activeID]="'yourMenuItemID'"

[animation] prop example:

We have two types of animation, in and out. Value is a name of animation. Duration is an optional parameter that shows how long the animation should work.

For in: we have two animations for choice slide-in | slide-in-stagger.

For out: just one slide-out.

{
  "in": { "value": "slide-in-stagger" },
  "out": { "value": "slide-out", "duration": "200" }
}

If you don’t want any animations - just pass false into [animation]="false"

API

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

License

Simple sidenav is Copyright © 2015-2018 Codica. It is released under the MIT License.

About Codica

Simple sidenav is maintained and funded by Codica. The names and logos for Codica are trademarks of Codica.

We love open source software! See our other projects or hire us to design, develop, and grow your product.