Rate this docs

Angular Bootstrap sidenav

Angular Sidenav - Bootstrap 4 & Material Design

Angular Bootstrap sidenav is a vertical navigation component which allow to navigate swiftly through small applications and vast portals.

By virtue of its clarity and simplicity it remarkably increases User Experience. 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 mobile device:

Sidenav mobile version

SideNav examples MDB Pro component

Click on the images below to see live preview


Basic usage MDB Pro component


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

Fixed / non-fixed SideNav MDB Pro component

Use [fixed]="true" input and .fixed class to make the sidenav fixed. The component will open automatically on large screens and hide on smaller screens. The navigation you can see on the left is an example of fixed SideNav.

If you want to hide your SideNav by default just remove .fixed class and set [fixed] input to true.


    <mdb-side-nav #sidenav [fixed]="true">

    

Required padding-left when using .fixed class

If 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



Customize sidenav MDB Pro component

Changing the color

You can use each of 300 colors from our Material Palette just by adding a proper color class.

In the example below we've added a .purple color class and .darken-4 to make the color 4 levels darker.


<mdb-side-nav #sidenav class="purple darken-4">

Light /dark background

Depending on light or dark background you may need to set a proper contrast for links and other SideNav's elements.

Use .side-nav-light for light backgrounds.


<mdb-side-nav #sidenav" class="side-nav-light">

Gradient / images / masks

For gradients, images or masks use our predefined Skins


Customize sidenav MDB Pro component

MDB provides you multiple useful, ready-to-use page layouts with various predefined navigation types.

Click buttons below to learn more:

Predefined layouts Predefined skins

Angular SideNav - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of sidenav component.


Modules used

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'

Components

MdbSidenav

Selector: mdb-side-nav

Type: SidenavComponent


Inputs

Name Type Default Description Example
fixed boolean true Specifies wheter sidenav has fixed position [fixed]="false"
sidenavBreakpoint number 1440 Allow to change default sidenav breakpoint [sidenavBreakpoint]="1200"

Methods

Use @ViewChild decorator to get access to the sidenav methods in your component:

@ViewChild('sidenav') sidenav: SidenavComponent

Name Description Example
show() Open sidenav this.sidenav.show()
hide() Close sidenav this.sidenav.close()
toggle() Open or close sidenav this.sidenav.toggle()