Angular Bootstrap Hamburger Menu

By clicking, you active a part of information or navigation that is hidden by default for UX purpose.

This usually means activating a SideNav, but might also roll down a Navbar menu.

Examples of Bootstrap hamburger menu use:

  • SideNav activation
  • Navbar menu

See the following Angular Bootstrap hamburger menu examples:


Hamburger menu basic

Info notification

MDB has hundreds of colors to use within hamburger menu. Take a look here to know all the possibilities.

            
                <!--Navbar-->
                <mdb-navbar SideClass="navbar navbar-1 navbar-light amber lighten-2" [containerInside]="false">
                
                  <!-- Navbar brand -->
                  <mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>
                
                  <!-- Collapsible content -->
                  <links>
                
                      <!-- Links -->
                      <ul class="navbar-nav mr-auto">
                          <li class="nav-item active">
                              <a class="nav-link waves-light" mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
                          </li>
                          <li class="nav-item">
                              <a class="nav-link waves-light" mdbWavesEffect>Features</a>
                          </li>
                          <li class="nav-item">
                              <a class="nav-link waves-light" mdbWavesEffect>Pricing</a>
                          </li>
                      </ul>
                      <!-- Links -->
                  </links>
                  <!-- Collapsible content -->
                
                </mdb-navbar>
                <!--/.Navbar-->
            
        

Various hamburger menu icons


            .navbar.navbar-1 .navbar-toggler-icon {
                background-image: url('https://mdbootstrap.com/img/svg/hamburger6.svg?color=000');
            }
            .navbar.navbar-2 .navbar-toggler-icon {
                background-image: url('https://mdbootstrap.com/img/svg/hamburger2.svg?color=fff');
            }
            .navbar.navbar-3 .navbar-toggler-icon {
                background-image: url('https://mdbootstrap.com/img/svg/hamburger1.svg?color=6a1b9a');
            }
            .navbar.navbar-4 .navbar-toggler-icon {
                background-image: url('https://mdbootstrap.com/img/svg/hamburger7.svg?color=BFE100');
            }
            .navbar.navbar-5 .navbar-toggler-icon {
                background-image: url('https://mdbootstrap.com/img/svg/hamburger5.svg?color=f3e5f5');
            }
            .navbar.navbar-6 .navbar-toggler-icon {
                background-image: url('https://mdbootstrap.com/img/svg/hamburger8.svg?color=E3005C');
            }
            .navbar.navbar-7 .navbar-toggler-icon {
                background-image: url('https://mdbootstrap.com/img/svg/hamburger9.svg?color=FF2C00');
            }
            .navbar.navbar-8 .navbar-toggler-icon {
                background-image: url('https://mdbootstrap.com/img/svg/hamburger4.svg?color=1729B0');
            }
            .navbar.navbar-9 .navbar-toggler-icon {
                background-image: url('https://mdbootstrap.com/img/svg/hamburger3.svg?color=00FBD8');
            }
        

          <!--Navbar-->
          <mdb-navbar SideClass="navbar navbar-1 navbar-dark purple" [containerInside]="false">

            <!-- Navbar brand -->
            <mdb-navbar-brand>
              <a class="navbar-brand" href="#">Navbar</a>
            </mdb-navbar-brand>

            <!-- Collapsible content -->
            <links>

              <!-- Links -->
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link waves-light" mdbWavesEffect>Home
                    <span class="sr-only">(current)</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link waves-light" mdbWavesEffect>Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link waves-light" mdbWavesEffect>Pricing</a>
                </li>
              </ul>
              <!-- Links -->
            </links>
            <!-- Collapsible content -->

          </mdb-navbar>
          <!--/.Navbar-->
        

Hamburger icon with background MDB Pro component

Info notification

You can style hamburger icon background with iconBackground input. Add single color class or array of multiple classes

                
                    <!--Navbar-->
                    <mdb-navbar SideClass="navbar navbar-dark indigo" [containerInside]="false" [iconBackground]="['amber', 'darken-2']">
                    
                      <!-- Navbar brand -->
                      <mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>
                    
                      <!-- Collapsible content -->
                      <links>
                    
                          <!-- Links -->
                          <ul class="navbar-nav mr-auto">
                              <li class="nav-item active">
                                  <a class="nav-link waves-light" mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link waves-light" mdbWavesEffect>Features</a>
                              </li>
                              <li class="nav-item">
                                  <a class="nav-link waves-light" mdbWavesEffect>Pricing</a>
                              </li>
                          </ul>
                          <!-- Links -->
                      </links>
                      <!-- Collapsible content -->
                    
                    </mdb-navbar>
                    <!--/.Navbar-->
                
            

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 Navbars:
// For MDB Angular Pro
import { NavbarModule, WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { NavbarModule, WavesModule } from 'angular-bootstrap-md'