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