Hamburger Menu
Bootstrap 5 Hamburger Menu
Responsive Hamburger menu with Bootstrap 5. Templates include hamburger menu on the left and on the right (RTL support), icon animations, sidenav, navbar & more.
Hamburger menu is a navigation type that serves the purpose of hiding some menu items & showing them on click. It stacks the items on top of each other in a "hamburger" fashion.
Basic example
Simple example of hamburger menu in a navbar.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
<button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
<button class="btn btn-link btn-block m-0">Link 3</button>
</div>
</div>
Hamburger Icons
Examples of icon usage in Bootstrap Hamburger menu.
You will find even more icons in the Icons Documentation.
Custom icons
You can make any icon a hamburger menu toggler.
<!--Default icon-->
<section class="mb-3">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent4"
aria-controls="navbarToggleExternalContent4" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent4">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
<button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
<button class="btn btn-link btn-block m-0">Link 3</button>
</div>
</div>
</section>
<!--Hamburger icon-->
<section class="mb-3">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent5"
aria-controls="navbarToggleExternalContent5" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-hamburger"></i>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent5">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
<button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
<button class="btn btn-link btn-block m-0">Link 3</button>
</div>
</div>
</section>
<!--Chevron icon-->
<section class="mb-3">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent6"
aria-controls="navbarToggleExternalContent6" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-chevron-circle-down"></i>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent6">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
<button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
<button class="btn btn-link btn-block m-0">Link 3</button>
</div>
</div>
</section>
<!--Dots icon-->
<section class="mb-3">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent7"
aria-controls="navbarToggleExternalContent7" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent7">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
<button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
<button class="btn btn-link btn-block m-0">Link 3</button>
</div>
</div>
</section>
<!--Compass icon-->
<section class="mb-3">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent8"
aria-controls="navbarToggleExternalContent8" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-compass"></i>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent8">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
<button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
<button class="btn btn-link btn-block m-0">Link 3</button>
</div>
</div>
</section>
Animated icons
Animated hamburger menu icons add dynamism to your design.
<!--First button-->
<section class="mb-3">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler first-button" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent9"
aria-controls="navbarToggleExternalContent9" aria-expanded="false"
aria-label="Toggle navigation">
<div class="animated-icon1"><span></span><span></span><span></span></div>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent9">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
<button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
<button class="btn btn-link btn-block m-0">Link 3</button>
</div>
</div>
</section>
<!--Second button-->
<section class="mb-3">
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler second-button" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent10"
aria-controls="navbarToggleExternalContent10" aria-expanded="false"
aria-label="Toggle navigation">
<div class="animated-icon2"><span></span><span></span><span></span><span></span></div>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent10">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
<button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
<button class="btn btn-link btn-block m-0">Link 3</button>
</div>
</div>
</section>
<!--Third button-->
<section class="mb-3">
<nav class="navbar navbar-info bg-info">
<div class="container-fluid">
<button class="navbar-toggler third-button" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent11"
aria-controls="navbarToggleExternalContent11" aria-expanded="false"
aria-label="Toggle navigation">
<div class="animated-icon3"><span></span><span></span><span></span></div>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent11">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
<button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
<button class="btn btn-link btn-block m-0">Link 3</button>
</div>
</div>
</section>
/* Icon 1 */
.animated-icon1,
.animated-icon2,
.animated-icon3 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon1 span,
.animated-icon2 span,
.animated-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon1 span {
background: #2d7ef7;
}
.animated-icon2 span {
background: #e3f2fd;
}
.animated-icon3 span {
background: #f3e5f5;
}
.animated-icon1 span:nth-child(1) {
top: 0px;
}
.animated-icon1 span:nth-child(2) {
top: 10px;
}
.animated-icon1 span:nth-child(3) {
top: 20px;
}
.animated-icon1.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.animated-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.animated-icon1.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* Icon 3*/
.animated-icon2 span:nth-child(1) {
top: 0px;
}
.animated-icon2 span:nth-child(2),
.animated-icon2 span:nth-child(3) {
top: 10px;
}
.animated-icon2 span:nth-child(4) {
top: 20px;
}
.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}
/* Icon 4 */
.animated-icon3 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon3 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon3 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon3.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.animated-icon3.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.animated-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}
document.querySelector('.first-button').addEventListener('click', function () {
document.querySelector('.animated-icon1').classList.toggle('open');
});
document.querySelector('.second-button').addEventListener('click', function () {
document.querySelector('.animated-icon2').classList.toggle('open');
});
document.querySelector('.third-button').addEventListener('click', function () {
document.querySelector('.animated-icon3').classList.toggle('open');
});
If you want to support our friends from Tailwind Elements you can check also check out the Tailwind Cards documentation.