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 
        
            

            <template>
              <MDBNavbar light bg="light" container>
                <MDBNavbarToggler @click="collapse1 = !collapse1" target="#navbarToggleExternalContent">
                </MDBNavbarToggler>
              </MDBNavbar>
              <MDBCollapse v-model="collapse1" id="navbarToggleExternalContent">
                <div class="bg-light shadow-3 p-4">
                  <MDBBtn color="link" block class="border-bottom m-0">
                    Link 1
                  </MDBBtn>
                  <MDBBtn color="link" block class="border-bottom m-0">
                    Link 2
                  </MDBBtn>
                  <MDBBtn color="link" block class="border-bottom m-0">
                    Link 3
                  </MDBBtn>
                </div>
              </MDBCollapse>
            </template>

            
        
    
        
            

            <script>
              import {
                MDBNavbar,
                MDBNavbarToggler,
                MDBCollapse,
                MDBBtn
              } from "mdb-vue-ui-kit";
              import {
                ref
              } from "vue";
              export default {
                components: {
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBCollapse,
                  MDBBtn
                },
                setup() {
                  const collapse1 = ref(false);
                  return {
                    collapse1
                  }
                }
              };
            </script>

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 elemnt will have the hamburger menu at the start of a navbar - on left or right side depending on the text direction.

Edit in sandbox 
        
            

            <template>
              <MDBNavbar light bg="light" container>
                <MDBNavbarToggler @click="collapse2 = !collapse2" target="#navbarToggleExternalContent2">
                </MDBNavbarToggler>
              </MDBNavbar>
              <MDBCollapse v-model="collapse2" id="navbarToggleExternalContent2">
                <div class="bg-light shadow-3 p-4">
                  <MDBBtn color="link" block class="border-bottom m-0">
                    Link 1
                  </MDBBtn>
                  <MDBBtn color="link" block class="border-bottom m-0">
                    Link 2
                  </MDBBtn>
                  <MDBBtn color="link" block class="border-bottom m-0">
                    Link 3
                  </MDBBtn>
                </div>
              </MDBCollapse>
            </template>

            
        
    
        
            

            <script>
              import {
                MDBNavbar,
                MDBNavbarToggler,
                MDBCollapse,
                MDBBtn
              } from "mdb-vue-ui-kit";
              import {
                ref
              } from "vue";
              export default {
                components: {
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBCollapse,
                  MDBBtn
                },
                setup() {
                  const collapse1 = ref(false);
                  return {
                    collapse1
                  }
                }
              };
            </script>

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 
        
            

            <template>
              <MDBNavbar light bg="light" container>
                <MDBNavbarToggler @click="collapse3 = !collapse3" target="#navbarToggleExternalContent2"
                  togglerClass="ms-auto"></MDBNavbarToggler>
              </MDBNavbar>
              <MDBCollapse v-model="collapse3" id="navbarToggleExternalContent2">
                <div class="bg-light shadow-3 p-4">
                  <MDBBtn color="link" block class="border-bottom m-0">
                    Link 1
                  </MDBBtn>
                  <MDBBtn color="link" block class="border-bottom m-0">
                    Link 2
                  </MDBBtn>
                  <MDBBtn color="link" block class="border-bottom m-0">
                    Link 3
                  </MDBBtn>
                </div>
              </MDBCollapse>
            </template>

            
        
    
        
            

            <script>
              import {
                MDBNavbar,
                MDBNavbarToggler,
                MDBCollapse,
                MDBBtn
              } from "mdb-vue-ui-kit";
              import {
                ref
              } from "vue";
              export default {
                components: {
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBCollapse,
                  MDBBtn
                },
                setup() {
                  const collapse3 = ref(false);
                  return {
                    collapse3
                  }
                }
              };
            </script>

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 
        
            

            <template>
              <MDBSideNav v-model="sidenav1" absolute id="sidenav1">
                <MDBSideNavMenu>
                  <MDBSideNavItem>
                    <MDBSideNavLink>
                      <MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
                      <span>Link 1</span>
                    </MDBSideNavLink>
                  </MDBSideNavItem>
                  <MDBSideNavItem collapse icon="grin" title="Category 1" show>
                    <MDBSideNavItem>
                      <MDBSideNavLink>Link 2</MDBSideNavLink>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink>Link 3</MDBSideNavLink>
                    </MDBSideNavItem>
                  </MDBSideNavItem>
                  <MDBSideNavItem collapse icon="grin-wink" title="Category 2">
                    <MDBSideNavItem>
                      <MDBSideNavLink>Link 4</MDBSideNavLink>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink>Link 5</MDBSideNavLink>
                    </MDBSideNavItem>
                  </MDBSideNavItem>
                </MDBSideNavMenu>
              </MDBSideNav>

              <div class="text-center">
                <MDBBtn color="primary" aria-controls="#sidenav1" @click="sidenav1 = !sidenav1">
                  <MDBIcon icon="bars" />
                </MDBBtn>
              </div>
            </template>

            
        
    
        
            

            <script>
              import {
                MBSideNav,
                MDBSideNavMenu,
                MDBSideNavItem,
                MDBSideNavLink,
                MDBIcon,
                MDBBtn,
                MDBIcon
              } from "mdb-vue-ui-kit";
              import {
                ref
              } from "vue";

              export default {
                components: {
                  MBSideNav,
                  MDBSideNavMenu,
                  MDBSideNavItem,
                  MDBSideNavLink,
                  MDBIcon,
                  MDBBtn,
                  MDBIcon
                },
                setup() {
                  const sidenav1 = ref(false);

                  return {
                    sidenav1
                  }
                }
              };
            </script>

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 
        
            

            <template>
              <MDBSideNav v-model="sidenav2" absolute right id="sidenav2">
                <MDBSideNavMenu>
                  <MDBSideNavItem>
                    <MDBSideNavLink>
                      <MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
                      <span>Link 1</span>
                    </MDBSideNavLink>
                  </MDBSideNavItem>
                  <MDBSideNavItem collapse icon="grin" title="Category 1">
                    <MDBSideNavItem>
                      <MDBSideNavLink>Link 2</MDBSideNavLink>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink>Link 3</MDBSideNavLink>
                    </MDBSideNavItem>
                  </MDBSideNavItem>
                  <MDBSideNavItem collapse icon="grin-wink" title="Category 2">
                    <MDBSideNavItem>
                      <MDBSideNavLink>Link 4</MDBSideNavLink>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink>Link 5</MDBSideNavLink>
                    </MDBSideNavItem>
                  </MDBSideNavItem>
                </MDBSideNavMenu>
              </MDBSideNav>

              <div class="text-center">
                <MDBBtn color="primary" aria-controls="#sidenav2" @click="sidenav2 = !sidenav2">
                  <MDBIcon icon="bars" />
                </MDBBtn>
              </div>
            </template>

            
        
    
        
            

            <script>
              import {
                MBSideNav,
                MDBSideNavMenu,
                MDBSideNavItem,
                MDBSideNavLink,
                MDBIcon,
                MDBBtn,
                MDBIcon
              } from "mdb-vue-ui-kit";
              import {
                ref
              } from "vue";

              export default {
                components: {
                  MBSideNav,
                  MDBSideNavMenu,
                  MDBSideNavItem,
                  MDBSideNavLink,
                  MDBIcon,
                  MDBBtn,
                  MDBIcon
                },
                setup() {
                  const sidenav2 = ref(false);

                  return {
                    sidenav2
                  }
                }
              };
            </script>

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 
        
            

            <template>
              <section class="mb-3">
                <MDBNavbar light bg="light" container>
                  <MDBNavbarToggler @click="collapse4 = !collapse4" target="#navbarToggleExternalContent4">
                  </MDBNavbarToggler>
                </MDBNavbar>
                <MDBCollapse v-model="collapse4" id="navbarToggleExternalContent4">
                  <div class="bg-light shadow-3 p-4">
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 1
                    </MDBBtn>
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 2
                    </MDBBtn>
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 3
                    </MDBBtn>
                  </div>
                </MDBCollapse>
              </section>

              <section class="mb-3">
                <MDBNavbar light bg="light" container>
                  <MDBNavbarToggler @click="collapse5 = !collapse5" target="#navbarToggleExternalContent5"
                    togglerIcon="hamburger"></MDBNavbarToggler>
                </MDBNavbar>
                <MDBCollapse v-model="collapse5" id="navbarToggleExternalContent5">
                  <div class="bg-light shadow-3 p-4">
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 1
                    </MDBBtn>
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 2
                    </MDBBtn>
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 3
                    </MDBBtn>
                  </div>
                </MDBCollapse>
              </section>

              <section class="mb-3">
                <MDBNavbar light bg="light" container>
                  <MDBNavbarToggler @click="collapse6 = !collapse6" target="#navbarToggleExternalContent6"
                    togglerIcon="chevron-circle-down"></MDBNavbarToggler>
                </MDBNavbar>
                <MDBCollapse v-model="collapse6" id="navbarToggleExternalContent6">
                  <div class="bg-light shadow-3 p-4">
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 1
                    </MDBBtn>
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 2
                    </MDBBtn>
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 3
                    </MDBBtn>
                  </div>
                </MDBCollapse>
              </section>

              <section class="mb-3">
                <MDBNavbar light bg="light" container>
                  <MDBNavbarToggler @click="collapse7 = !collapse7" target="#navbarToggleExternalContent7"
                    togglerIcon="ellipsis-h"></MDBNavbarToggler>
                </MDBNavbar>
                <MDBCollapse v-model="collapse7" id="navbarToggleExternalContent7">
                  <div class="bg-light shadow-3 p-4">
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 1
                    </MDBBtn>
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 2
                    </MDBBtn>
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 3
                    </MDBBtn>
                  </div>
                </MDBCollapse>
              </section>

              <section class="mb-3">
                <MDBNavbar light bg="light" container>
                  <MDBNavbarToggler @click="collapse8 = !collapse8" target="#navbarToggleExternalContent8"
                    togglerIcon="compass"></MDBNavbarToggler>
                </MDBNavbar>
                <MDBCollapse v-model="collapse8" id="navbarToggleExternalContent8">
                  <div class="bg-light shadow-3 p-4">
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 1
                    </MDBBtn>
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 2
                    </MDBBtn>
                    <MDBBtn color="link" block class="border-bottom m-0">
                      Link 3
                    </MDBBtn>
                  </div>
                </MDBCollapse>
              </section>
            </template>
            
        
    
        
            

            <script>
              import {
                MDBNavbar,
                MDBNavbarToggler,
                MDBCollapse,
                MDBBtn,
                MDBIcon
              } from "mdb-vue-ui-kit";
              import {
                ref
              } from "vue";

              export default {
                components: {
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBCollapse,
                  MDBBtn,
                  MDBIcon
                },
                setup() {
                  const collapse4 = ref(false);
                  const collapse5 = ref(false);
                  const collapse6 = ref(false);
                  const collapse7 = ref(false);
                  const collapse8 = ref(false);

                  return {
                    collapse4,
                    collapse5,
                    collapse6,
                    collapse7,
                    collapse8,
                  }
                }
              };
            </script>

Animated icons

Animated hamburger menu icons add dynamism to your design.

Edit in sandbox 
        
            

            <template>
              <section class="mb-3">
                <section class="mb-3">
                  <MDBNavbar light bg="light" container>
                    <button @click="collapse9 = !collapse9" class="navbar-toggler first-button"
                      :aria-expanded="collapse9" aria-label="Toggle navigation"
                      aria-controls="navbarToggleExternalContent9">
                      <div class="animated-icon1" :class="[collapse9 && 'open']">
                        <span></span><span></span><span></span>
                      </div>
                    </button>
                  </MDBNavbar>
                  <MDBCollapse v-model="collapse9" id="navbarToggleExternalContent9">
                    <div class="bg-light shadow-3 p-4">
                      <MDBBtn color="link" block class="border-bottom m-0">
                        Link 1
                      </MDBBtn>
                      <MDBBtn color="link" block class="border-bottom m-0">
                        Link 2
                      </MDBBtn>
                      <MDBBtn color="link" block class="border-bottom m-0">
                        Link 3
                      </MDBBtn>
                    </div>
                  </MDBCollapse>
                </section>

                <section class="mb-3">
                  <MDBNavbar dark bg="dark" container>
                    <button @click="collapse10 = !collapse10" class="navbar-toggler second-button"
                      :aria-expanded="collapse10" aria-label="Toggle navigation"
                      aria-controls="navbarToggleExternalContent10">
                      <div class="animated-icon2" :class="[collapse10 && 'open']">
                        <span></span><span></span><span></span><span></span>
                      </div>
                    </button>
                  </MDBNavbar>
                  <MDBCollapse v-model="collapse10" id="navbarToggleExternalContent9">
                    <div class="bg-light shadow-3 p-4">
                      <MDBBtn color="link" block class="border-bottom m-0">
                        Link 1
                      </MDBBtn>
                      <MDBBtn color="link" block class="border-bottom m-0">
                        Link 2
                      </MDBBtn>
                      <MDBBtn color="link" block class="border-bottom m-0">
                        Link 3
                      </MDBBtn>
                    </div>
                  </MDBCollapse>
                </section>

                <section class="mb-3">
                  <MDBNavbar dark bg="info" container>
                    <button @click="collapse11 = !collapse11" class="navbar-toggler third-button"
                      :aria-expanded="collapse11" aria-label="Toggle navigation"
                      aria-controls="navbarToggleExternalContent11">
                      <div class="animated-icon3" :class="[collapse11 && 'open']">
                        <span></span><span></span><span></span>
                      </div>
                    </button>
                  </MDBNavbar>
                  <MDBCollapse v-model="collapse11" id="navbarToggleExternalContent9">
                    <div class="bg-light shadow-3 p-4">
                      <MDBBtn color="link" block class="border-bottom m-0">
                        Link 1
                      </MDBBtn>
                      <MDBBtn color="link" block class="border-bottom m-0">
                        Link 2
                      </MDBBtn>
                      <MDBBtn color="link" block class="border-bottom m-0">
                        Link 3
                      </MDBBtn>
                    </div>
                  </MDBCollapse>
                </section>
              </section>
            </template>
            
        
    
        
            
            <style lang="scss">
              /* 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;
              }
            </style>
            
        
    
        
            
            <script>
              import {
                MDBNavbar,
                MDBNavbarToggler,
                MDBCollapse,
                MDBBtn,
                MDBIcon
              } from "mdb-vue-ui-kit";
              import {
                ref
              } from "vue";

              export default {
                components: {
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBCollapse,
                  MDBBtn,
                  MDBIcon
                },
                setup() {
                  const collapse9 = ref(false);
                  const collapse10 = ref(false);
                  const collapse11 = ref(false);

                  return {
                    collapse9,
                    collapse10,
                    collapse11
                  }
                }
              };
            </script>