Vue Bootstrap Hamburger Menu

Vue Hamburger Menu - Bootstrap 4 & Material Design

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


        <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


        <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.


        <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.


          <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!


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.

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.

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.


        <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


          <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>
        

Warning: file_get_contents(common/gs.html): failed to open stream: No such file or directory in /var/www/html/legacy/vue/5.8.3/index.php on line 143