Hamburger Menu

Vue Bootstrap 5 Hamburger Menu

Responsive Vue Hamburger button menu with Bootstrap 5. Hamburger toggle menu for mobile navigation, icon animations, sidenav, navbar templates & 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 a hamburger menu in a navbar.

Edit in sandbox 
        
            

            <nav class="navbar navbar-light bg-light">
              <div class="container-fluid">
                    <button
                  class="navbar-toggler"
                  type="button"
                  (click)="externalContent.toggle()"
                  aria-controls="navbarToggleExternalContent"
                  [attr.aria-expanded]="!externalContent.collapsed"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
              </div>
            </nav>
            <div
              class="collapse"
              id="navbarToggleExternalContent"
              mdbCollapse
              #externalContent="mdbCollapse"
            >
              <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 in Navbar

Explore advanced navbar options & customization in the Navbar Documentation.

Start

By default this hamburger menu will be displayed on the left side of a navbar.

MDB supports right-to-left so you can easily reverse text direction as well as this display of the navbar icon.

So this element will have the hamburger menu at the start of a navbar - on left or right side depending on the text direction.

Edit in sandbox 
        
            

            <nav class="navbar navbar-light bg-light">
              <div class="container-fluid">
                    <button
                  class="navbar-toggler"
                  type="button"
                  (click)="externalContent.toggle()"
                  aria-controls="navbarToggleExternalContent"
                  [attr.aria-expanded]="!externalContent.collapsed"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
              </div>
            </nav>
            <div
              class="collapse"
              id="navbarToggleExternalContent"
              mdbCollapse
              #externalContent="mdbCollapse"
            >
              <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>

End

By default this hamburger menu will be displayed on the right side of a navbar.

You can easily push an element to the end of its parent by using the .ms-auto class which stands for margin start: auto.

Thanks to this approach this example also supports RTL text direction (so with RTL enabled it will display on the left side).

Edit in sandbox 
        
            

            <nav class="navbar navbar-light bg-light">
              <div class="container-fluid">
                    <button
                  class="navbar-toggler ms-auto"
                  type="button"
                  (click)="externalContent.toggle()"
                  aria-controls="navbarToggleExternalContent"
                  [attr.aria-expanded]="!externalContent.collapsed"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
              </div>
            </nav>
            <div
              class="collapse"
              id="navbarToggleExternalContent"
              mdbCollapse
              #externalContent="mdbCollapse"
            >
              <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 in Sidenav

Hamburger Button is a common way to toggle sidenav on mobile devices.

You can learn more about the sidebar component in the Side Navigation Documentation.

Start

Simple example of a sidebar hamburger menu with the side navigation element at the start of the viewport (on the left side by default).

Edit in sandbox 
        
            

            <mdb-sidenav-layout>
              <mdb-sidenav #sidenav="mdbSidenav">
                <ul class="sidenav-menu">
                  <mdb-sidenav-item>
                    <a class="sidenav-link">
                      <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span>
                    </a>
                  </mdb-sidenav-item>
                  <mdb-sidenav-item>
                    <a class="sidenav-link">
                      <i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span>
                    </a>
                    <ul class="sidenav-collapse" mdbCollapse>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 2</a>
                      </li>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 3</a>
                      </li>
                    </ul>
                  </mdb-sidenav-item>
                  <mdb-sidenav-item>
                    <a class="sidenav-link">
                      <i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span>
                    </a>
                    <ul class="sidenav-collapse" mdbCollapse>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 4</a>
                      </li>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 5</a>
                      </li>
                    </ul>
                  </mdb-sidenav-item>
                </ul>
              </mdb-sidenav>
              <mdb-sidenav-content #sidenavContent>
                <!-- Toggler -->
                <div class="text-center p-5">
                  <button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggle()">
                  <i class="fas fa-bars"></i>
                </button>
                </div>
                <!-- Toggler -->
              </mdb-sidenav-content>
            </mdb-sidenav-layout>

End

Simple example of a sidebar hamburger menu with the side navigation element at the end of the viewport (on the left side by default).

Place the navigation on the other side by setting the right attribute to true.

Edit in sandbox 
        
            

            <mdb-sidenav-layout>
              <mdb-sidenav #sidenav="mdbSidenav" [right]=true>
                <ul class="sidenav-menu">
                  <mdb-sidenav-item>
                    <a class="sidenav-link">
                      <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span>
                    </a>
                  </mdb-sidenav-item>
                  <mdb-sidenav-item>
                    <a class="sidenav-link">
                      <i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span>
                    </a>
                    <ul class="sidenav-collapse" mdbCollapse>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 2</a>
                      </li>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 3</a>
                      </li>
                    </ul>
                  </mdb-sidenav-item>
                  <mdb-sidenav-item>
                    <a class="sidenav-link">
                      <i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span>
                    </a>
                    <ul class="sidenav-collapse" mdbCollapse>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 4</a>
                      </li>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 5</a>
                      </li>
                    </ul>
                  </mdb-sidenav-item>
                </ul>
              </mdb-sidenav>
              <mdb-sidenav-content #sidenavContent>
                <!-- Toggler -->
                <div class="text-center p-5">
                  <button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggle()">
                  <i class="fas fa-bars"></i>
                </button>
                </div>
                <!-- Toggler -->
              </mdb-sidenav-content>
            </mdb-sidenav-layout>

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.

Edit in sandbox 
        
            

            <section class="mb-3">
              <nav class="navbar navbar-light bg-light">
                <div class="container-fluid">
                  <button
                    class="navbar-toggler"
                    type="button"
                    (click)="externalContent1.toggle()"
                    aria-controls="navbarToggleExternalContent1"
                    [attr.aria-expanded]="!externalContent1.collapsed"
                    aria-label="Toggle navigation"
                  >
                    <i class="fas fa-bars"></i>
                  </button>
                </div>
              </nav>
              <div
                class="collapse"
                id="navbarToggleExternalContent1"
                mdbCollapse
                #externalContent1="mdbCollapse"
              >
                <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>
            
            <section class="mb-3">
                <nav class="navbar navbar-light bg-light">
                  <div class="container-fluid">
                    <button
                      class="navbar-toggler"
                      type="button"
                      (click)="externalContent2.toggle()"
                      aria-controls="navbarToggleExternalContent2"
                      [attr.aria-expanded]="!externalContent2.collapsed"
                      aria-label="Toggle navigation"
                    >
                      <i class="fas fa-hamburger"></i>
                    </button>
                  </div>
                </nav>
                <div
                  class="collapse"
                  id="navbarToggleExternalContent2"
                  mdbCollapse
                  #externalContent2="mdbCollapse"
                >
                  <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>
            
              <section class="mb-3">
                <nav class="navbar navbar-light bg-light">
                  <div class="container-fluid">
                    <button
                      class="navbar-toggler"
                      type="button"
                      (click)="externalContent3.toggle()"
                      aria-controls="navbarToggleExternalContent3"
                      [attr.aria-expanded]="!externalContent3.collapsed"
                      aria-label="Toggle navigation"
                    >
                      <i class="fas fa-chevron-circle-down"></i>
                    </button>
                  </div>
                </nav>
                <div
                  class="collapse"
                  id="navbarToggleExternalContent3"
                  mdbCollapse
                  #externalContent3="mdbCollapse"
                >
                  <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>
            
              <section class="mb-3">
                <nav class="navbar navbar-light bg-light">
                  <div class="container-fluid">
                    <button
                      class="navbar-toggler"
                      type="button"
                      (click)="externalContent4.toggle()"
                      aria-controls="navbarToggleExternalContent4"
                      [attr.aria-expanded]="!externalContent4.collapsed"
                      aria-label="Toggle navigation"
                    >
                      <i class="fas fa-ellipsis-h"></i>
                    </button>
                  </div>
                </nav>
                <div
                  class="collapse"
                  id="navbarToggleExternalContent4"
                  mdbCollapse
                  #externalContent4="mdbCollapse"
                >
                  <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>
            
              <section class="mb-3">
                <nav class="navbar navbar-light bg-light">
                  <div class="container-fluid">
                    <button
                      class="navbar-toggler"
                      type="button"
                      (click)="externalContent5.toggle()"
                      aria-controls="navbarToggleExternalContent5"
                      [attr.aria-expanded]="!externalContent5.collapsed"
                      aria-label="Toggle navigation"
                    >
                      <i class="fas fa-compass"></i>
                    </button>
                  </div>
                </nav>
                <div
                  class="collapse"
                  id="navbarToggleExternalContent5"
                  mdbCollapse
                  #externalContent5="mdbCollapse"
                >
                  <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.

Edit in sandbox 
        
            

            <section class="mb-3">
              <nav class="navbar navbar-light bg-light">
                <div class="container-fluid">
                  <button
                    class="navbar-toggler first-button"
                    type="button"
                    (click)="externalContent1.toggle()"
                    aria-controls="navbarToggleExternalContent1"
                    [attr.aria-expanded]="!externalContent1.collapsed"
                    aria-label="Toggle navigation"
                  >
                  <div class="animated-icon1" [ngClass]="{'open':!externalContent1.collapsed}"><span></span><span></span><span></span></div>
                  </button>
                </div>
              </nav>
              <div
                class="collapse"
                id="navbarToggleExternalContent1"
                mdbCollapse
                #externalContent1="mdbCollapse"
              >
                <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>
             
            <section class="mb-3">
                <nav class="navbar navbar-dark bg-dark">
                  <div class="container-fluid">
                    <button
                      class="navbar-toggler second-button"
                      type="button"
                      (click)="externalContent2.toggle()"
                      aria-controls="navbarToggleExternalContent2"
                      [attr.aria-expanded]="!externalContent2.collapsed"
                      aria-label="Toggle navigation"
                    >
                    <div class="animated-icon2" [ngClass]="{'open':!externalContent2.collapsed}"><span></span><span></span><span></span><span></span></div>
                    </button>
                  </div>
                </nav>
                <div
                  class="collapse"
                  id="navbarToggleExternalContent2"
                  mdbCollapse
                  #externalContent2="mdbCollapse"
                >
                  <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>
            
              <section class="mb-3">
                <nav class="navbar navbar-info bg-info">
                  <div class="container-fluid">
                    <button
                      class="navbar-toggler third-button"
                      type="button"
                      (click)="externalContent3.toggle()"
                      aria-controls="navbarToggleExternalContent3"
                      [attr.aria-expanded]="!externalContent3.collapsed"
                      aria-label="Toggle navigation"
                    >
                    <div class="animated-icon3" [ngClass]="{'open':!externalContent3.collapsed}"><span></span><span></span><span></span></div>
                    </button>
                  </div>
                </nav>
                <div
                  class="collapse"
                  id="navbarToggleExternalContent3"
                  mdbCollapse
                  #externalContent3="mdbCollapse"
                >
                  <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: 0.5s ease-in-out;
              -moz-transition: 0.5s ease-in-out;
              -o-transition: 0.5s ease-in-out;
              transition: 0.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: 0.25s ease-in-out;
              -moz-transition: 0.25s ease-in-out;
              -o-transition: 0.25s ease-in-out;
              transition: 0.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;
            }