Angular Bootstrap hamburger menu

Angular Hamburger Menu - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap hamburger menu is component which allow you to 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-->
          <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-->
        
        
    
        
            
          mdb-navbar .navbar.navbar-1 .navbar-toggler-icon {
            background-image: url('https://mdbootstrap.com/img/svg/hamburger6.svg?color=000');
          }
          mdb-navbar .navbar.navbar-2 .navbar-toggler-icon {
            background-image: url('https://mdbootstrap.com/img/svg/hamburger2.svg?color=fff');
          }
          mdb-navbar .navbar.navbar-3 .navbar-toggler-icon {
            background-image: url('https://mdbootstrap.com/img/svg/hamburger1.svg?color=6a1b9a');
          }
          mdb-navbar .navbar.navbar-4 .navbar-toggler-icon {
            background-image: url('https://mdbootstrap.com/img/svg/hamburger7.svg?color=BFE100');
          }
          mdb-navbar .navbar.navbar-5 .navbar-toggler-icon {
            background-image: url('https://mdbootstrap.com/img/svg/hamburger5.svg?color=f3e5f5');
          }
          mdb-navbar .navbar.navbar-6 .navbar-toggler-icon {
            background-image: url('https://mdbootstrap.com/img/svg/hamburger8.svg?color=E3005C');
          }
          mdb-navbar .navbar.navbar-7 .navbar-toggler-icon {
            background-image: url('https://mdbootstrap.com/img/svg/hamburger9.svg?color=FF2C00');
          }
          mdb-navbar .navbar.navbar-8 .navbar-toggler-icon {
            background-image: url('https://mdbootstrap.com/img/svg/hamburger4.svg?color=1729B0');
          }
          mdb-navbar .navbar.navbar-9 .navbar-toggler-icon {
            background-image: url('https://mdbootstrap.com/img/svg/hamburger3.svg?color=00FBD8');
          }

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

Angular Hamburger Menu - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of hamburger menu 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 Hamburger Menu:
        
            
            import { NavbarModule, WavesModule } from 'ng-uikit-pro-standard'
          
        
    
        
            
            import { NavbarModule, WavesModule } from 'angular-bootstrap-md'
Import example Modules list

Components

MdbNavbar

Selector: mdb-navbar

Type: NavbarComponent

MdbNavbarBrand

Selector: mdb-navbar-brand

Type: LogoComponent

Links

Selector: links

Type: LinksComponent

Inputs

MdbNavbar
Name Type Default Description Example
containerInside boolean true Allow to add container for navbar content [containerInside]="false"
iconBackground string | string[]; - Allow to change background color of hamburger icon [iconBackground]="'purple'"
SideClass string - Allow to add custom classes to navbar [SideClass]="'navbar navbar-expands indigo'"

Methods

You can get access to the navbar methods from another component. Add template reference variable to your mdb-navbar component in HTML file:

<mdb-navbar #navbar></mdb-navbar>

Then in your typescript file use @ViewChild decorator to get access to MdbNavbar methods:

@ViewChild('navbar', { static: true }) navbar: NavbarComponent

Name Description Example
show Open navbar (to use on the expandable navbar) this.navbar.open()
hide Close navbar (to use on the expandable navbar) this.navbar.close()
toggle Open or close navbar (to use on the expandable navbar) this.navbar.toggle()