Angular Bootstrap sidenav MDB Pro component
SideNav also called Sidebar or simply - Side Menu, is not Bootstraps native component. It�s common for Material Design form of navigation, which quickly became a standard in modern web design.
By virtue of its clarity and simplicity it remarkably increases User Experience. It allows you to navigate through small applications as well as vast portals swiftly. Multiple link embedding functionality enables you to implement more advanced content categorisation, which is almost essential within bigger projects.
Thanks to MDB you can easily implement SideNav in your own projects, by using one of various, alluring Side Menus.
Navigation on the left is a live demo of SideNav.
How it looks on a mobile device:
SideNav examples
Click on the images below to see live preview
Basic usage
<!-- SideNav slide-out button -->
<a (click)="sidenav.toggle()" class="btn btn-primary p-3 button-collapse"><i class="fa fa-bars"></i></a>
<!--/. SideNav slide-out button -->
<!-- Sidebar navigation -->
<mdb-side-nav #sidenav class="fixed" [fixed]="true">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light">
<a href="#"><img src="http://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group md-form waves-light" mdbWavesEffect>
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<mdb-accordion [multiple]="false" aria-multiselectable="false">
<!-- Collapsible link -->
<mdb-accordion-item>
<mdb-accordion-item-head mdbWavesEffect><i class="fa fa-chevron-right"></i> Collapsible menu</mdb-accordion-item-head>
<mdb-accordion-item-body>
<ul>
<li><a href="#" class="waves-effect" mdbWavesEffect>Link 1</a></li>
<li><a href="#" class="waves-effect" mdbWavesEffect>Link 2</a></li>
</ul>
</mdb-accordion-item-body>
</mdb-accordion-item>
<!-- Simple link -->
<mdb-accordion-item class="no-collase">
<mdb-accordion-item-head mdbWavesEffect><i class="fa fa-hand-pointer-o"></i> Simple link</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>
<!-- Collapsible link -->
<mdb-accordion-item>
<mdb-accordion-item-head mdbWavesEffect><i class="fa fa-eye"></i> Collapsible menu 2</mdb-accordion-item-head>
<mdb-accordion-item-body>
<ul>
<li><a href="#" class="waves-effect" mdbWavesEffect>Link 1</a></li>
<li><a href="#" class="waves-effect" mdbWavesEffect>Link 2</a></li>
</ul>
</mdb-accordion-item-body>
</mdb-accordion-item>
<!-- Simple link -->
<mdb-accordion-item class="no-collase">
<mdb-accordion-item-head mdbWavesEffect><i class="fa fa-diamond"></i> Simple link 2</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>
</ul>
</li>
<!--/. Side navigation links -->
<div class="sidenav-bg mask-strong"></div>
</mdb-side-nav>
<!--/. Sidebar navigation -->
Methods:
// Show sideNav
sidenav.show();
// Hide sideNav
sidenav.hide();
// Toggle sideNav
sidenav.toggle();
Fixed / non-fixed SideNav
Use [fixed]="true"
and class .fixed
to have the sideNav be fixed and open on large screens and hides to the regular functionality on smaller screens. Our sideNav on the left is an example of fixed SideNav.
If you want to hide your SideNav by default just remove .fixed
and set [fixed]
to true
class from the SideNav.
<mdb-side-nav #sidenav [fixed]="true">
Required
padding-left
when using.fixed
classIf you are planning on using this you will have to offset your content by the width of the side menu. Place the padding on where the offset content will be, which in our case is in header, main and footer.
header, main, footer {
padding-left: 240px;
}
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
Note: Instead of adding required padding via CSS you can use one of our predefined Navigation Layouts
Advanced usage
MDB provides you multiple useful, ready-to-use page layouts with various predefined navigation types.
Click buttons below to learn more:
Predefined layouts Predefined skinsConfiguration options
Here you can find configuration options of SideNav
Name | Type | Default | Description |
---|---|---|---|
sidenavBreakpoint | number | 1440 | If set, allows to change the default breakpoint of SideNav. Example: sidenavBreakpoint="1200" |
API Reference:
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Sidenav:
// For MDB Angular Pro
import { SidenavModule, WavesModule, AccordionModule } from 'ng-uikit-pro-standard'