Simple sidenav
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 --saveUsage
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:
idmust be unique, aniconis optional, amenucan 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.