Vue Bootstrap Hamburger Menu

Vue Hamburger Menu - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue Bootstrap Hamburger menu is a navigation with additional hamburger looks like icon which activates hidden menu elements in Navbar or Sidenav.

By clicking, you active a part of information or navigation that is hidden by default for UX purpose.

Vue live preview

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

Basic example

See the following Bootstrap hamburger menu examples

Show code

template
script
style

        
            
        <template>
          <mdb-container>
            <mdb-navbar class="mt-2" hamburger expand="xl">
              <mdb-navbar-brand>
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar color="light-blue" class="mt-2 lighten-4" hamburger navIconClass="dark-blue-text" expand="xl">
              <mdb-navbar-brand>
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar color="pink" class="mt-2 lighten-4" hamburger navIconClass="dark-pink-text" expand="xl">
              <mdb-navbar-brand>
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar color="amber" class="mt-2 lighten-4" hamburger navIconClass="dark-amber-text" expand="xl">
              <mdb-navbar-brand>
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar color="teal" class="mt-2 lighten-4" hamburger navIconClass="dark-teal-text" expand="xl">
              <mdb-navbar-brand>
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
          </mdb-container>
        </template>

        
            
        <script>
          import {
            mdbNavbar,
            mdbNavItem,
            mdbNavbarNav,
            mdbNavbarToggler,
            mdbContainer,
            mdbRow,
            mdbInput,
            mdbNavbarBrand,
            mdbIcon
          } from 'mdbvue';
          export default {
            name: 'HamburgerMenuPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbContainer,
              mdbRow,
              mdbInput,
              mdbNavbarBrand,
              mdbIcon
            }
          }
        </script>

        
            
        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style>
          .dark-blue-text {
            color: #0A38F5;
          }

          .dark-pink-text {
            color: #AC003A;
          }

          .dark-amber-text {
            color: #ff6f00;
          }

          .dark-teal-text {
            color: #004d40;
          }
        </style>

Various hamburger menu icons

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

Show code

template
script
style

        
            
        <template>
          <mdb-container>
            <mdb-navbar class="mt-2 navbar-1" expand="xl">
              <mdb-navbar-brand>
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar class="mt-2 navbar-2" dark color="primary" expand="xl">
              <mdb-navbar-brand class="text-white">
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar class="mt-2 navbar-3" dark color="default" expand="xl">
              <mdb-navbar-brand class="text-white">
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar color="pink" class="mt-2 navbar-4" dark expand="xl">
              <mdb-navbar-brand class="text-white">
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar class="mt-2 navbar-5" dark color="secondary" expand="xl">
              <mdb-navbar-brand class="text-white">
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar class="mt-2 navbar-6" dark color="success" expand="xl">
              <mdb-navbar-brand class="text-white">
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar class="mt-2 navbar-7" dark color="info" expand="xl">
              <mdb-navbar-brand class="text-white">
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar class="mt-2 navbar-8" dark color="warning" expand="xl">
              <mdb-navbar-brand class="text-white">
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <mdb-navbar class="mt-2 navbar-9" dark color="danger" expand="xl">
              <mdb-navbar-brand class="text-white">
                Navbar
              </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
          </mdb-container>
        </template>

        
            
        <script>
          import {
            mdbNavbar,
            mdbNavItem,
            mdbNavbarNav,
            mdbNavbarToggler,
            mdbContainer,
            mdbRow,
            mdbInput,
            mdbNavbarBrand,
            mdbIcon
          } from 'mdbvue';
          export default {
            name: 'HamburgerMenuPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbContainer,
              mdbRow,
              mdbInput,
              mdbNavbarBrand,
              mdbIcon
            }
          }
        </script>

        
            
        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style>
          .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');
          }
        </style>

Hamburger menu with custom icons

To replace the default toggler with a custom icon, add hamburger property and set the following properties: togglerIcon, togglerIconClass, togglerSize.

Show code

template
script

        
            
        <template>
          <mdb-container>
            <!--Navbar-->
            <mdb-navbar expand="xl" hamburger class="mt-2 grey" dark togglerIcon="caret-square-down">
              <!-- Navbar brand -->
              <mdb-navbar-brand class="text-white">Navbar</mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <!--Navbar-->
            <mdb-navbar expand="xl" class="mt-2" hamburger togglerIcon="heart" dark color="indigo">
              <!-- Navbar brand -->
              <mdb-navbar-brand class="text-white">Navbar</mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <!--Navbar-->
            <mdb-navbar expand="xl" class="mt-2" hamburger togglerIcon="paper-plane" far dark color="mdb-color">
              <!-- Navbar brand -->
              <mdb-navbar-brand class="text-white">Navbar</mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <!--Navbar-->
            <mdb-navbar expand="xl" class="mt-2" hamburger togglerIcon="angle-double-down" dark color="info"
              togglerIconClass="red-text">
              <!-- Navbar brand -->
              <mdb-navbar-brand class="text-white">Navbar</mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <!--Navbar-->
            <mdb-navbar expand="xl" class="mt-2 darken-4" hamburger togglerIcon="chevron-down" togglerSize="xs" dark
              color="amber">
              <!-- Navbar brand -->
              <mdb-navbar-brand class="text-white">Navbar</mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <!--Navbar-->
            <mdb-navbar expand="xl" hamburger class="mt-2" togglerIcon="plus" dark color="danger"
              togglerIconClass="lime-text">
              <!-- Navbar brand -->
              <mdb-navbar-brand class="text-white">Navbar</mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
          </mdb-container>
        </template>

        
            
        <script>
          import {
            mdbNavbar,
            mdbNavItem,
            mdbNavbarNav,
            mdbNavbarToggler,
            mdbContainer,
            mdbRow,
            mdbInput,
            mdbNavbarBrand,
            mdbIcon
          } from 'mdbvue';
          export default {
            name: 'HamburgerMenuPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbContainer,
              mdbRow,
              mdbInput,
              mdbNavbarBrand,
              mdbIcon
            }
          }
        </script>

Hamburger menu icon animations

You can use mdbNavbarToggler component with animated and animation props. Click on the icon to see the animation.

Show code

template
script

        
            
          <template>
            <mdb-container>
              <!--Navbar-->
              <mdb-navbar color="amber" class="mt-2 lighten-4" expand="xl" togglerIcon="" animated animation="1">
                <!-- Navbar brand -->
                <mdb-navbar-brand>Navbar</mdb-navbar-brand>
                <mdb-navbar-toggler>
                  <mdb-navbar-nav right>
                    <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                  </mdb-navbar-nav>
                </mdb-navbar-toggler>
              </mdb-navbar>
              <!--/.Navbar-->
              <!--Navbar-->
              <mdb-navbar color="red" class="mt-2 lighten-1" expand="xl" dark animated animation="3">
                <!-- Navbar brand -->
                <mdb-navbar-brand class="text-white">Navbar</mdb-navbar-brand>
                <mdb-navbar-toggler>
                  <mdb-navbar-nav right>
                    <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                  </mdb-navbar-nav>
                </mdb-navbar-toggler>
              </mdb-navbar>
              <!--/.Navbar-->
              <!--Navbar-->
              <mdb-navbar color="indigo" class="mt-2" expand="xl" dark animated animation="2">
                <!-- Navbar brand -->
                <mdb-navbar-brand class="text-white">Navbar</mdb-navbar-brand>
                <mdb-navbar-toggler>
                  <mdb-navbar-nav right>
                    <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                  </mdb-navbar-nav>
                </mdb-navbar-toggler>
              </mdb-navbar>
            </mdb-container>
          </template>

        
            
          <script>
            import {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbContainer,
              mdbRow,
              mdbInput,
              mdbNavbarBrand,
              mdbIcon
            } from 'mdbvue';
            export default {
              name: 'HamburgerMenuPage',
              components: {
                mdbNavbar,
                mdbNavItem,
                mdbNavbarNav,
                mdbNavbarToggler,
                mdbContainer,
                mdbRow,
                mdbInput,
                mdbNavbarBrand,
                mdbIcon
              }
            }
          </script>

Hamburger icon within accordion MDB Pro component

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

template
script

        
            
        <template>
          <mdb-container>
            <mdb-col md="6">
              <mdb-accordion icon hamburger :panes="panes">
                <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">
              </mdb-accordion>
            </mdb-col>
          </mdb-container>
        </template>

        
            
        <script>
          import {
            mdbNavbar,
            mdbNavItem,
            mdbNavbarNav,
            mdbNavbarBrand,
            mdbNavbarToggler,
            mdbAccordion,
            mdbContainer,
            mdbRow,
            mdbCol,
            mdbIcon
          } from 'mdbvue';
          export default {
            name: 'HamburgerMenuPagePro',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarBrand,
              mdbNavbarToggler,
              mdbAccordion,
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbIcon
            },
            data() {
              return {
                panes: [{
                    title: 'How awesome accordion I am?',
                    content: '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.'
                  }, {
                    title: "You're the greatest accordion!",
                    content: '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.'
                  },
                  {
                    title: 'Thank you my dear!',
                    content: '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.'
                  }
                ]
              };
            }
          }
        </script>

Hamburger icon with background MDB Pro component

Show code

template
script

        
            
          <template>
            <mdb-container>
              <!--Navbar-->
              <mdb-navbar class="mt-2" hamburger expand="lx" togglerClass="black text-white">
                <!-- mdbNavbar brand -->
                <mdb-navbar-brand>mdbNavbar</mdb-navbar-brand>
                <mdb-navbar-toggler>
                  <mdb-navbar-nav right>
                    <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                  </mdb-navbar-nav>
                </mdb-navbar-toggler>
              </mdb-navbar>
              <!--/.Navbar-->
              <!--Navbar-->
              <mdb-navbar color="purple" class="mt-2 lighten-4" expand="lx" hamburger
                togglerClass="purple darken-3 text-white">
                <!-- mdbNavbar brand -->
                <mdb-navbar-brand>mdbNavbar</mdb-navbar-brand>
                <mdb-navbar-toggler>
                  <mdb-navbar-nav right>
                    <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                  </mdb-navbar-nav>
                </mdb-navbar-toggler>
              </mdb-navbar>
              <!--/.Navbar-->
              <!--Navbar-->
              <mdb-navbar color="cyan" class="mt-2 lighten-4" hamburger expand="lx" togglerClass="cyan darken-4 text-white">
                <!-- mdbNavbar brand -->
                <mdb-navbar-brand>mdbNavbar</mdb-navbar-brand>
                <mdb-navbar-toggler>
                  <mdb-navbar-nav right>
                    <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                  </mdb-navbar-nav>
                </mdb-navbar-toggler>
              </mdb-navbar>
              <!--/.Navbar-->
              <!--Navbar-->
              <mdb-navbar color="green" class="mt-2 lighten-4" hamburger expand="lx"
                togglerClass="aqua-gradient darken-4 text-white">
                <!-- mdbNavbar brand -->
                <mdb-navbar-brand>mdbNavbar</mdb-navbar-brand>
                <mdb-navbar-toggler>
                  <mdb-navbar-nav right>
                    <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                  </mdb-navbar-nav>
                </mdb-navbar-toggler>
              </mdb-navbar>
              <!--/.Navbar-->
              <!--Navbar-->
              <mdb-navbar color="orange" class="mt-2 lighten-4" hamburger expand="lx"
                togglerClass="peach-gradient darken-4 text-white">
                <!-- mdbNavbar brand -->
                <mdb-navbar-brand>mdbNavbar</mdb-navbar-brand>
                <mdb-navbar-toggler>
                  <mdb-navbar-nav right>
                    <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                    <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                  </mdb-navbar-nav>
                </mdb-navbar-toggler>
              </mdb-navbar>
              <!--/.Navbar-->
            </mdb-container>
          </template>

        
            
          <script>
            import {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarBrand,
              mdbNavbarToggler,
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbIcon
            } from 'mdbvue';
            export default {
              name: 'HamburgerMenuPagePro',
              components: {
                mdbNavbar,
                mdbNavItem,
                mdbNavbarNav,
                mdbNavbarBrand,
                mdbNavbarToggler,
                mdbContainer,
                mdbRow,
                mdbCol,
                mdbIcon
              }
            }
          </script>