Hamburger Menu

Bootstrap Hamburger Menu

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

By clicking on this control, you activate some information or navigation that is hidden by default for UX purposes.

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

Examples of Bootstrap hamburger menu use include:

SideNav activation
Navbar menu

This is illustrated by the following Bootstrap hamburger menu examples:

Basic example

Info notification

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

Show code Edit in sandbox

HTML
CSS

        
            

        <!--Navbar-->
        <nav class="navbar navbar-light light-blue lighten-4">

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

          <!-- Collapse button -->
          <button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
            aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
                class="fas fa-bars fa-1x"></i></span></button>

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent1">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
            </ul>
            <!-- Links -->

          </div>
          <!-- Collapsible content -->

        </nav>
        <!--/.Navbar-->

        
            

        .fa-1x {
          font-size: 1.5rem;
        }
        .navbar-toggler.toggler-example {
          cursor: pointer;
        }
        .dark-blue-text {
          color: #0A38F5;
        }
        .dark-pink-text {
          color: #AC003A;
        }
        .dark-amber-text {
          color: #ff6f00;
        }
        .dark-teal-text {
          color: #004d40;
        }

Various hamburger menu icons

You can use any of the icons available on MDB to mark the hamburger drop-down menu.

Show code Edit in sandbox

HTML
CSS

        
            

        <!--Navbar-->
        <nav class="navbar navbar-light navbar-1 white">

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

          <!-- Collapse button -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent15"
            aria-controls="navbarSupportedContent15" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent15">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
            </ul>
            <!-- Links -->

          </div>
          <!-- Collapsible content -->

        </nav>
        <!--/.Navbar-->

        
            

        .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');
        }

Hamburger menu icon animations

Click on the icon to see the animation.

Show code Edit in sandbox

HTML
CSS
JS

        
            

        <!--Navbar-->
        <nav class="navbar navbar-light amber lighten-4 mb-4">

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

          <!-- Collapse button -->
          <button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent20"
            aria-controls="navbarSupportedContent20" aria-expanded="false" aria-label="Toggle navigation">
            <div class="animated-icon1"><span></span><span></span><span></span></div>
          </button>

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent20">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
            </ul>
            <!-- Links -->

          </div>
          <!-- Collapsible content -->

        </nav>
        <!--/.Navbar-->

        <!--Navbar-->
        <nav class="navbar navbar-dark red lighten-1 mb-4">

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

          <!-- Collapse button -->
          <button class="navbar-toggler second-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent23"
            aria-controls="navbarSupportedContent23" aria-expanded="false" aria-label="Toggle navigation">
            <div class="animated-icon2"><span></span><span></span><span></span><span></span></div>
          </button>

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent23">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
            </ul>
            <!-- Links -->

          </div>
          <!-- Collapsible content -->

        </nav>
        <!--/.Navbar-->

        <!--Navbar-->
        <nav class="navbar navbar-dark  indigo darken-2">

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

          <!-- Collapse button -->
          <button class="navbar-toggler third-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent22"
            aria-controls="navbarSupportedContent22" aria-expanded="false" aria-label="Toggle navigation">
            <div class="animated-icon3"><span></span><span></span><span></span></div>
          </button>

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent22">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
            </ul>
            <!-- Links -->

          </div>
          <!-- Collapsible content -->

        </nav>
        <!--/.Navbar-->

        
            
        /* 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: #e65100;
        }

        .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).ready(function () {

          $('.first-button').on('click', function () {

            $('.animated-icon1').toggleClass('open');
          });
          $('.second-button').on('click', function () {

            $('.animated-icon2').toggleClass('open');
          });
          $('.third-button').on('click', function () {

            $('.animated-icon3').toggleClass('open');
          });
        });

Hamburger icon within an accordion

Info notification

Copy the code above ("hamburger menu icon animations") if you want to have them within an accordion.

Hello, my friends, I am the nicest accordion!

How awesome accordion I am?

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

You're the greatest accordion!

Thank you my dear!

Show code Edit in sandbox

HTML
CSS

        
            

        <!--Accordion wrapper-->
        <div class="accordion md-accordion accordion-3 z-depth-1-half" id="accordionEx194" role="tablist"
        aria-multiselectable="true">

        <ul class="list-unstyled d-flex justify-content-center pt-5 red-text">
          <li><i class="fas fa-anchor mr-3 fa-2x" aria-hidden="true"></i></li>
          <li><i class="far fa-life-ring mr-3 fa-2x" aria-hidden="true"></i></li>
          <li><i class="far fa-star fa-2x" aria-hidden="true"></i></li>
        </ul>

        <h2 class="text-center text-uppercase red-text py-4 px-3">Hello my friends, I am the nicest accordion!</h2>

        <hr class="mb-0">

        <!-- Accordion card -->
        <div class="card">

          <!-- Card header -->
          <div class="card-header" role="tab" id="heading4">
            <a data-toggle="collapse" data-parent="#accordionEx194" href="#collapse4" aria-expanded="true"
              aria-controls="collapse4">
              <h3 class="mb-0 red-text">
                How awesome accordion I am? <div class="animated-icon1 float-right mt-1"><span></span><span></span><span></span></div>
              </h3>
            </a>
          </div>

          <!-- Card body -->
          <div id="collapse4" class="collapse show" role="tabpanel" aria-labelledby="heading4" data-parent="#accordionEx194">
            <div class="card-body pt-0">
              <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
                wolf moon officia aute,
                non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                accusamus labore sustainable VHS.</p>
            </div>
          </div>
        </div>
        <!-- Accordion card -->

        <!-- Accordion card -->
        <div class="card">

          <!-- Card header -->
          <div class="card-header" role="tab" id="heading5">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx194" href="#collapse5" aria-expanded="false"
              aria-controls="collapse5">
              <h3 class="mb-0 red-text">
                You're the greatest accordion! <div class="animated-icon1 float-right mt-1"><span></span><span></span><span></span></div>
              </h3>
            </a>
          </div>

          <!-- Card body -->
          <div id="collapse5" class="collapse" role="tabpanel" aria-labelledby="heading5" data-parent="#accordionEx194">
            <div class="card-body pt-0">
              <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
                wolf moon officia aute,
                non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                accusamus labore sustainable VHS.</p>
            </div>
          </div>
        </div>
        <!-- Accordion card -->

        <!-- Accordion card -->
        <div class="card">

          <!-- Card header -->
          <div class="card-header" role="tab" id="heading6">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx194" href="#collapse6" aria-expanded="false"
              aria-controls="collapse6">
              <h3 class="mb-0 red-text">
                Thank you my dear! <div class="animated-icon1 float-right mt-1"><span></span><span></span><span></span></div>
              </h3>
            </a>
          </div>

          <!-- Card body -->
          <div id="collapse6" class="collapse" role="tabpanel" aria-labelledby="heading6" data-parent="#accordionEx194">
            <div class="card-body pt-0">
              <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
                wolf moon officia aute,
                non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                accusamus labore sustainable VHS.</p>
            </div>
          </div>
        </div>
        <!-- Accordion card -->
        </div>
        <!--/.Accordion wrapper-->

        
            
        .accordion.accordion-3 {
          border-radius: 3px; 
        }

        .accordion.accordion-3 p {
          font-size: 1rem; 
        }

        .accordion.accordion-3 .fa.fa-angle-down {
          margin-top: -10px; 
        }

        .accordion .animated-icon1 span {
          background: #F44336;
        }

Hamburger icon with background

Show code Edit in sandbox

HTML

        
            

        <!--Navbar-->
        <nav class="navbar navbar-light purple lighten-4 mb-4">

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

          <!-- Collapse button -->
          <button class="navbar-toggler toggler-example purple darken-3" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent41" aria-controls="navbarSupportedContent41" aria-expanded="false"
            aria-label="Toggle navigation"><span class="white-text"><i class="fas fa-bars fa-1x"></i></span></button>

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent41">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
            </ul>
            <!-- Links -->

          </div>
          <!-- Collapsible content -->

        </nav>
        <!--/.Navbar-->