Rate this docs

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.

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-container>
      <!--Navbar-->
      <mdb-navbar class="mt-2" hamburger>
        <!-- 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 class="mt-2 light-blue lighten-4" hamburger navIconClass="dark-blue-text">
        <!-- 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 class="mt-2 pink lighten-4" hamburger navIconClass="dark-pink-text">
        <!-- 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 class="mt-2 amber lighten-4" hamburger navIconClass="dark-amber-text">
        <!-- 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 class="mt-2 teal lighten-4" hamburger navIconClass="dark-teal-text">
        <!-- 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-->
    </mdb-container>
  </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-container>
      <!--Navbar-->
      <mdb-navbar class="mt-2 navbar-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 class="mt-2 navbar-2" dark color="primary">
        <!-- 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 class="mt-2 navbar-3" dark color="default">
        <!-- 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 class="mt-2 navbar-4 pink" dark>
        <!-- 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 class="mt-2 navbar-5" dark color="secondary">
        <!-- 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 class="mt-2 navbar-6" dark color="success">
        <!-- 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 class="mt-2 navbar-7" dark color="info">
        <!-- 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 class="mt-2 navbar-8" dark color="warning">
        <!-- 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 class="mt-2 navbar-9" dark color="danger">
        <!-- 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>
  </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 icon animations

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



<template>
  <mdb-container>
    <mdb-container>
      <!--Navbar-->
      <mdb-navbar class="mt-2 amber lighten-4" 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 class="mt-2 red lighten-1" 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 class="mt-2 indigo darken-2" dark animated animation="4">
        <!-- 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>
  </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>
</style>

        

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="fa fa-anchor mr-3 fa-2x" aria-hidden="true"></i></li>
          <li><i class="fa fa-life-saver mr-3 fa-2x" aria-hidden="true"></i></li>
          <li><i class="fa fa-star-o 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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

      

Hamburger icon with background MDB Pro component



<template>
  <mdb-container>
    <!--Navbar-->
    <mdb-navbar class="mt-2" hamburger togglerClass="black text-white">
      <!-- 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 class="mt-2 purple lighten-4" hamburger togglerClass="purple darken-3 text-white">
      <!-- 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 class="mt-2 cyan lighten-4" hamburger togglerClass="cyan darken-4 text-white">
      <!-- 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 class="mt-2 green lighten-4" hamburger togglerClass="aqua-gradient darken-4 text-white">
      <!-- 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 class="mt-2 orange lighten-4" hamburger togglerClass="peach-gradient darken-4 text-white">
      <!-- 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-->
  </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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>