Rate these docs

Vue Bootstrap Navigation

Vue Navigation - Bootstrap 4 & Material Design

MDB provides you several useful, ready-to-use navigation layouts with various predefined navigation types.

1. Regular fixed Navbar

2. Regular non-fixed Navbar

3. Full Page Intro with non-fixed Navbar

4. Full Page Intro with fixed Navbar

5. Full Page Intro with fixed, transparent Navbar

6. Full Page Intro with non-fixed, transparent Navbar

7. Double Navigation with fixed SideNav & fixed Navbar

8. Double Navigation with fixed SideNav & non-fixed Navbar

9. Double Navigation with hidden SideNav & fixed Navbar

10. Double Navigation with hidden SideNav & non-fixed Navbar

11. Double Navigation with SideNav hidden under fixed Navbar

12. Double Navigation with fixed slim SideNav & Navbar


Regular fixed Navbar

Website with a regular fixed Navbar. Live preview

        <template>
          <!--Navbar-->
          <mdb-navbar position="top" dark color="primary" scrolling>
            <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
            <mdb-navbar-toggler>
              <mdb-navbar-nav>
                <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>
                <!-- Dropdown -->
                <mdb-dropdown tag="li" class="nav-item">
                  <mdb-dropdown-toggle tag="a" navLink color="primary" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
                  <mdb-dropdown-menu v-show="active[0]">
                    <mdb-dropdown-item>Action</mdb-dropdown-item>
                    <mdb-dropdown-item>Another action</mdb-dropdown-item>
                    <mdb-dropdown-item>Something else here</mdb-dropdown-item>
                  </mdb-dropdown-menu>
                </mdb-dropdown>
              </mdb-navbar-nav>
              <!-- Search form -->
              <form>
                <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
              </form>
            </mdb-navbar-toggler>
          </mdb-navbar>
          <!--/.Navbar-->
        </template>
      

        <script>
          import { mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbInput, mdbBtn, mdbNavbarBrand } from 'mdbvue';
          export default {
            name: 'NavigationPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbDropdown,
              mdbDropdownItem,
              mdbDropdownMenu,
              mdbDropdownToggle,
              mdbInput,
              mdbBtn,
              mdbNavbarBrand
            }
          }
        </script>
      

        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped>
          .view {
            background: url("https://mdbootstrap.com/img/Photos/Others/img (42).jpg")no-repeat center center;
            background-size: cover;
            height: 100%;
          }
          
          .navbar .dropdown-menu a:hover {
            color: inherit !important;
          }
        </style>
      

Regular non-fixed Navbar

Website with a regular fixed Navbar. Live preview

        <template>
          <!--Navbar-->
          <mdb-navbar dark color="primary">
            <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
            <mdb-navbar-toggler>
              <mdb-navbar-nav>
                <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>
                <!-- Dropdown -->
                <mdb-dropdown tag="li" class="nav-item">
                  <mdb-dropdown-toggle tag="a" navLink color="primary" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
                  <mdb-dropdown-menu v-show="active[0]">
                    <mdb-dropdown-item>Action</mdb-dropdown-item>
                    <mdb-dropdown-item>Another action</mdb-dropdown-item>
                    <mdb-dropdown-item>Something else here</mdb-dropdown-item>
                  </mdb-dropdown-menu>
                </mdb-dropdown>
              </mdb-navbar-nav>
              <!-- Search form -->
              <form>
                <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
              </form>
            </mdb-navbar-toggler>
          </mdb-navbar>
          <!--/.Navbar-->
        </template>
      

Full Page Intro with non-fixed Navbar

Website with a regular fixed Navbar. Live preview

        <template>
          <div>
            <!--Navbar-->
            <mdb-navbar position="top" dark color="primary" scrolling>
              <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav>
                  <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>
                  <!-- Dropdown -->
                  <mdb-dropdown tag="li" class="nav-item">
                    <mdb-dropdown-toggle tag="a" navLink color="primary" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
                    <mdb-dropdown-menu v-show="active[0]">
                      <mdb-dropdown-item>Action</mdb-dropdown-item>
                      <mdb-dropdown-item>Another action</mdb-dropdown-item>
                      <mdb-dropdown-item>Something else here</mdb-dropdown-item>
                    </mdb-dropdown-menu>
                  </mdb-dropdown>
                </mdb-navbar-nav>
                <!-- Search form -->
                <form>
                  <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
                </form>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <div style="height: 100vh">
              <div v-show="content" class="view intro-2">
                <div class="full-bg-img">
                  <mdb-mask overlay="black-strong" class="flex-center">
                    <mdb-container>
                      <div class="white-text text-center wow fadeInUp">
                        <h2>This is test message</h2>
                      </div>
                    </mdb-container>
                  </mdb-mask>
                </div>
              </div>
            </div>
          </div>
        </template>
      

        <script>
          import { mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbInput, mdbBtn, mdbNavbarBrand } from 'mdbvue';
          export default {
            name: 'NavigationPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbDropdown,
              mdbDropdownItem,
              mdbDropdownMenu,
              mdbDropdownToggle,
              mdbInput,
              mdbBtn,
              mdbNavbarBrand
            }
          }
        </script>
      

Full Page Intro with fixed Navbar

Website with a regular fixed Navbar. Live preview

        <template>
          <div>
            <!--Navbar-->
            <mdb-navbar dark color="primary">
              <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav>
                  <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>
                  <!-- Dropdown -->
                  <mdb-dropdown tag="li" class="nav-item">
                    <mdb-dropdown-toggle tag="a" navLink color="primary" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
                    <mdb-dropdown-menu v-show="active[0]">
                      <mdb-dropdown-item>Action</mdb-dropdown-item>
                      <mdb-dropdown-item>Another action</mdb-dropdown-item>
                      <mdb-dropdown-item>Something else here</mdb-dropdown-item>
                    </mdb-dropdown-menu>
                  </mdb-dropdown>
                </mdb-navbar-nav>
                <!-- Search form -->
                <form>
                  <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
                </form>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <div style="height: 100vh">
              <div v-show="content" class="view intro-2">
                <div class="full-bg-img">
                  <mdb-mask overlay="black-strong" class="flex-center">
                    <mdb-container>
                      <div class="white-text text-center wow fadeInUp">
                        <h2>This is test message</h2>
                      </div>
                    </mdb-container>
                  </mdb-mask>
                </div>
              </div>
            </div>
          </div>
        </template>
      

        <script>
          import { mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbInput, mdbBtn, mdbNavbarBrand } from 'mdbvue';
          export default {
            name: 'NavigationPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbDropdown,
              mdbDropdownItem,
              mdbDropdownMenu,
              mdbDropdownToggle,
              mdbInput,
              mdbBtn,
              mdbNavbarBrand
            }
          }
        </script>
      

Full Page Intro with fixed, transparent Navbar

Website with a regular fixed Navbar. Live preview

        <template>
          <div>
            <!--Navbar-->
            <mdb-navbar dark color="primary" position="top" transparent>
              <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav>
                  <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>
                  <!-- Dropdown -->
                  <mdb-dropdown tag="li" class="nav-item">
                    <mdb-dropdown-toggle tag="a" navLink color="primary" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
                    <mdb-dropdown-menu v-show="active[0]">
                      <mdb-dropdown-item>Action</mdb-dropdown-item>
                      <mdb-dropdown-item>Another action</mdb-dropdown-item>
                      <mdb-dropdown-item>Something else here</mdb-dropdown-item>
                    </mdb-dropdown-menu>
                  </mdb-dropdown>
                </mdb-navbar-nav>
                <!-- Search form -->
                <form>
                  <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
                </form>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <div style="height: 100vh">
              <div v-show="content" class="view intro-2">
                <div class="full-bg-img">
                  <mdb-mask overlay="black-strong" class="flex-center">
                    <mdb-container>
                      <div class="white-text text-center wow fadeInUp">
                        <h2>This is test message</h2>
                      </div>
                    </mdb-container>
                  </mdb-mask>
                </div>
              </div>
            </div>
          </div>
        </template>
      

        <script>
          import { mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbInput, mdbBtn, mdbNavbarBrand } from 'mdbvue';
          export default {
            name: 'NavigationPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbDropdown,
              mdbDropdownItem,
              mdbDropdownMenu,
              mdbDropdownToggle,
              mdbInput,
              mdbBtn,
              mdbNavbarBrand
            }
          }
        </script>
      

Full Page Intro with non-fixed, transparent Navbar

Website with a regular fixed Navbar. Live preview

        <template>
          <div>
            <!--Navbar-->
            <mdb-navbar dark color="primary" style="margin-bottom: -60px; z-index: 1" transparent>
              <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav>
                  <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>
                  <!-- Dropdown -->
                  <mdb-dropdown tag="li" class="nav-item">
                    <mdb-dropdown-toggle  tag="a" navLink color="primary" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
                    <mdb-dropdown-menu v-show="active[0]">
                      <mdb-dropdown-item>Action</mdb-dropdown-item>
                      <mdb-dropdown-item>Another action</mdb-dropdown-item>
                      <mdb-dropdown-item>Something else here</mdb-dropdown-item>
                    </mdb-dropdown-menu>
                  </mdb-dropdown>
                </mdb-navbar-nav>
                <!-- Search form -->
                <form>
                  <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
                </form>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <div style="height: 100vh">
              <div v-show="content" class="view intro-2">
                <div class="full-bg-img">
                  <mdb-mask overlay="black-strong" class="flex-center">
                    <mdb-container>
                      <div class="white-text text-center wow fadeInUp">
                        <h2>This is test message</h2>
                      </div>
                    </mdb-container>
                  </mdb-mask>
                </div>
              </div>
            </div>
          </div>
        </template>
      

        <script>
          import { mdbNavbar, mdbNavbarBrand, mdbnavbarToggler, mdbNavbarNav, mdbNavItem, mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem, mdbInput, mdbMask, mdbContainer } from 'mdbvue';
          export default {
            name: 'NavigationPage',
            components: {
              mdbNavbar,
              mdbNavbarBrand,
              mdbNavbarToggler,
              mdbNavbarNav,
              mdbNavItem,
              mdbDropdown,
              mdbDropdownToggle,
              mdbDropdownMenu,
              mdbDropdownItem,
              mdbInput,
              mdbMask,
              mdbContainer
            }
          }
        </script>
      

Double Navigation with fixed SideNav & fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview

        <template>
          <div class="flexible-content">
            <!--Navbar-->
            <mdb-navbar position="top" dark color="primary" scrolling>
              <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav>
                  <mdb-icon icon="bars" size="2x" @click.native="handleBtnAClick"/>
                </mdb-navbar-nav>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#!" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>CSS</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>Components</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>Advanced</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <mdb-side-nav
              logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
              :OpenedFromOutside.sync="toggleA"
              color="primary-color"
              waves>
              <li>
                <ul class="social">
                <li><a href="#" class="icons-sm fb-ic"><mdb-icon fab icon="facebook" /></a></li>
                <li><a href="#" class="icons-sm pin-ic"><mdb-icon fab icon="pinterest" /></a></li>
                <li><a href="#" class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus" /></a></li>
                <li><a href="#" class="icons-sm tw-ic"><mdb-icon fab icon="twitter" /></a></li>
                </ul>
              </li>
              <li>
                <ul class="collapsible">
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 1 ? active = 0 : active = 1">
                      <mdb-icon icon="chevron-right"/> Submit blog<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 1 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 1" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">Submit listing</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Registration form</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 2 ? active = 0 : active = 2">
                      <mdb-icon far icon="hand-pointer"></mdb-icon> Instruction<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 2 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 2" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">For bloggers</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">For authors</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 3 ? active = 0 : active = 3">
                      <mdb-icon icon="eye"></mdb-icon> About<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 3 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 3" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">Introduction</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Monthly meetings</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 4 ? active = 0 : active = 4">
                      <mdb-icon far icon="envelope"></mdb-icon> Contact me<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 4 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 4" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">FAQ</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Write a message</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                </ul>
              </li>
            </mdb-side-nav>
          </div>
        </template>
      

        <script>
          import { mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbInput, mdbBtn, mdbSideNav, mdbSubMenu, mdbIcon, waves } from 'mdbvue';
          export default {
            name: 'DoubleNavigationPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbInput,
              mdbBtn,
              mdbSideNav,
              mdbSubMenu,
              mdbIcon
            },
            data() {
              return {
                active: {
                  0: false
                },
                toggleA: false
              };
            },
            methods: {
              handleBtnAClick() {
                this.toggleA = !this.toggleA;
              },
              beforeEnter(el) {
                this.elHeight = el.scrollHeight;
              },
              enter(el) {
                el.style.height = this.elHeight+'px';
              },
              beforeLeave(el) {
                el.style.height = 0;
              }
            },
            mixins: [waves]
          }
        </script>
      

        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped>
        .navbar .dropdown-menu a:hover {
          color: inherit !important;
        }
        .view {
          background: url("https://mdbootstrap.com/img/Photos/Others/img (42).jpg")no-repeat center center;
          background-size: cover;
          height: 100%;
        }
        .collapsible {
          margin-top: 1rem;
        }

        .collapsible-header {
          position: relative;
        }

        .collapse-item {
          overflow: hidden;
          height: 0;
          padding: 0;
          transition: height .3s;
        }
        .collapse-item a {
            padding-left: 47px;
            line-height: 36px;
            background-color: rgba(0,0,0,.15);
        }
        .fa-angle-down {
          float: right;
        }
        .icon-div {
          width: 49%;
          display: inline-block;
        }

        .rotated {
          transform: rotate(180deg);
        }

        .navbar i {
          cursor: pointer;
          color: white;
        }

        @media (min-width: 770px) {
          .flexible-content {
            padding-left: 240px;
          }
        }
      </style>
      

Double Navigation with fixed SideNav & non-fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview

        <template>
          <div class="flexible-content">
            <!--Navbar-->
            <mdb-navbar dark color="primary" href="#" scrolling>
              <mdb-navbar-toggler>
                <mdb-navbar-nav>
                  <mdb-icon icon="bars" size="2x" @click.native="handleBtnAClick"/>
                </mdb-navbar-nav>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#!" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>CSS</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>Components</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>Advanced</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <mdb-side-nav
              logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
              :OpenedFromOutside.sync="toggleA"
              color="primary-color"
              waves>
              <li>
                <ul class="social">
                <li><a href="#" class="icons-sm fb-ic"><mdb-icon fab icon="facebook" /></a></li>
                <li><a href="#" class="icons-sm pin-ic"><mdb-icon fab icon="pinterest" /></a></li>
                <li><a href="#" class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus" /></a></li>
                <li><a href="#" class="icons-sm tw-ic"><mdb-icon fab icon="twitter" /></a></li>
                </ul>
              </li>
              <li>
                <ul class="collapsible">
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 1 ? active = 0 : active = 1">
                      <mdb-icon icon="chevron-right"/> Submit blog<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 1 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 1" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">Submit listing</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Registration form</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 2 ? active = 0 : active = 2">
                      <mdb-icon far icon="hand-pointer"></mdb-icon> Instruction<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 2 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 2" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">For bloggers</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">For authors</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 3 ? active = 0 : active = 3">
                      <mdb-icon icon="eye"></mdb-icon> About<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 3 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 3" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">Introduction</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Monthly meetings</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 4 ? active = 0 : active = 4">
                      <mdb-icon far icon="envelope"></mdb-icon> Contact me<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 4 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 4" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">FAQ</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Write a message</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                </ul>
              </li>
            </mdb-side-nav>
          </div>
        </template>
      

        <script>
          import { mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbInput, mdbBtn, mdbSideNav, mdbSubMenu, mdbIcon, waves } from 'mdbvue';
          export default {
            name: 'DoubleNavigationPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbInput,
              mdbBtn,
              mdbSideNav,
              mdbSubMenu,
              mdbIcon
            },
            data() {
              return {
                active: {
                  0: false
                },
                toggleA: false
              };
            },
            methods: {
              handleBtnAClick() {
                this.toggleA = !this.toggleA;
              },
              beforeEnter(el) {
                this.elHeight = el.scrollHeight;
              },
              enter(el) {
                el.style.height = this.elHeight+'px';
              },
              beforeLeave(el) {
                el.style.height = 0;
              }
            },
            mixins: [waves]
          }
        </script>
      

Double Navigation with hidden SideNav & fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview

        <template>
          <div>
            <!--Navbar-->
            <mdb-navbar position="top" dark color="primary" href="#" scrolling>
              <mdb-navbar-brand href="#" />
              <mdb-navbar-toggler>
                <mdb-navbar-nav>
                  <mdb-icon icon="bars" size="2x" @click.native="handleBtnAClick"/>
                </mdb-navbar-nav>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#!" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>CSS</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>Components</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>Advanced</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <mdb-side-nav
              logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
              :OpenedFromOutside.sync="toggleA"
              color="primary-color"
              hidden
              waves>
              <li>
                <ul class="social">
                <li><a href="#" class="icons-sm fb-ic"><mdb-icon fab icon="facebook" /></a></li>
                <li><a href="#" class="icons-sm pin-ic"><mdb-icon fab icon="pinterest" /></a></li>
                <li><a href="#" class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus" /></a></li>
                <li><a href="#" class="icons-sm tw-ic"><mdb-icon fab icon="twitter" /></a></li>
                </ul>
              </li>
              <li>
                <ul class="collapsible">
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 1 ? active = 0 : active = 1">
                      <mdb-icon icon="chevron-right"/> Submit blog<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 1 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 1" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">Submit listing</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Registration form</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 2 ? active = 0 : active = 2">
                      <mdb-icon far icon="hand-pointer"></mdb-icon> Instruction<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 2 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 2" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">For bloggers</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">For authors</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 3 ? active = 0 : active = 3">
                      <mdb-icon icon="eye"></mdb-icon> About<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 3 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 3" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">Introduction</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Monthly meetings</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 4 ? active = 0 : active = 4">
                      <mdb-icon far icon="envelope"></mdb-icon> Contact me<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 4 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 4" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">FAQ</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Write a message</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                </ul>
              </li>
            </mdb-side-nav>
          </div>
        </template>
      

        <script>
          import { mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbInput, mdbBtn, mdbSideNav, mdbSubMenu, mdbIcon, waves } from 'mdbvue';
          export default {
            name: 'DoubleNavigationPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbInput,
              mdbBtn,
              mdbSideNav,
              mdbSubMenu,
              mdbIcon
            },
            data() {
              return {
                active: {
                  0: false
                },
                toggleA: false
              };
            },
            methods: {
              handleBtnAClick() {
                this.toggleA = !this.toggleA;
              },
              beforeEnter(el) {
                this.elHeight = el.scrollHeight;
              },
              enter(el) {
                el.style.height = this.elHeight+'px';
              },
              beforeLeave(el) {
                el.style.height = 0;
              }
            },
            mixins: [waves]
          }
        </script>
      

Double Navigation with hidden SideNav & non-fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview

        <template>
          <div>
            <!--Navbar-->
            <mdb-navbar dark color="primary" scrolling>
              <mdb-navbar-brand href="#" />
              <mdb-navbar-toggler>
                <mdb-navbar-nav>
                  <mdb-icon icon="bars" size="2x" @click.native="handleBtnAClick"/>
                </mdb-navbar-nav>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#!" waves-fixed>Home</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>CSS</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>Components</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>Advanced</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <mdb-side-nav
              logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
              :OpenedFromOutside.sync="toggleA"
              color="primary-color"
              hidden
              waves>
              <li>
                <ul class="social">
                <li><a href="#" class="icons-sm fb-ic"><mdb-icon fab icon="facebook" /></a></li>
                <li><a href="#" class="icons-sm pin-ic"><mdb-icon fab icon="pinterest" /></a></li>
                <li><a href="#" class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus" /></a></li>
                <li><a href="#" class="icons-sm tw-ic"><mdb-icon fab icon="twitter" /></a></li>
                </ul>
              </li>
              <li>
                <ul class="collapsible">
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 1 ? active = 0 : active = 1">
                      <mdb-icon icon="chevron-right"/> Submit blog<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 1 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 1" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">Submit listing</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Registration form</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 2 ? active = 0 : active = 2">
                      <mdb-icon far icon="hand-pointer"></mdb-icon> Instruction<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 2 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 2" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">For bloggers</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">For authors</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 3 ? active = 0 : active = 3">
                      <mdb-icon icon="eye"></mdb-icon> About<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 3 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 3" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">Introduction</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Monthly meetings</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                  <li>
                    <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 4 ? active = 0 : active = 4">
                      <mdb-icon far icon="envelope"></mdb-icon> Contact me<mdb-icon icon="angle-down" class="rotate-icon" :class="active === 4 ? 'rotated' : ''"/></a>
                    <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                      <mdb-sub-menu tag="ul" v-if="active === 4" class="collapse-item">
                        <li><a href="#" class="ripple-parent" @click="wave">FAQ</a>
                        </li>
                        <li><a href="#" class="ripple-parent" @click="wave">Write a message</a>
                        </li>
                      </mdb-sub-menu>
                    </transition>
                  </li>
                </ul>
              </li>
            </mdb-side-nav>
          </div>
        </template>
      

        <script>
          import { mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbInput, mdbBtn, mdbSideNav, mdbSubMenu, mdbIcon, waves } from 'mdbvue';
          export default {
            name: 'DoubleNavigationPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbInput,
              mdbBtn,
              mdbSideNav,
              mdbSubMenu,
              mdbIcon
            },
            data() {
              return {
                active: {
                  0: false
                },
                toggleA: false
              };
            },
            methods: {
              handleBtnAClick() {
                this.toggleA = !this.toggleA;
              },
              beforeEnter(el) {
                this.elHeight = el.scrollHeight;
              },
              enter(el) {
                el.style.height = this.elHeight+'px';
              },
              beforeLeave(el) {
                el.style.height = 0;
              }
            },
            mixins: [waves]
          }
        </script>
      

Double Navigation with fixed SideNav under fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview

        <template>
          <div class="flexible-content light-blue-skin">
            <!--Navbar-->
            <mdb-navbar position="top" dark scrolling>
              <mdb-navbar-nav>
                  <mdb-icon icon="bars" size="2x" @click.native="handleBtnAClick"/>
                </mdb-navbar-nav>
              <mdb-navbar-brand href="#" class="ml-2">MDB </mdb-navbar-brand>
              <mdb-navbar-toggler>
                <mdb-navbar-nav right>
                  <mdb-nav-item href="#!" waves-fixed><mdb-icon icon="envelope"></mdb-icon>Contact</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed>Support</mdb-nav-item>
                  <mdb-nav-item href="#!" waves-fixed><mdb-icon icon="user"></mdb-icon>Account</mdb-nav-item>
                  <mdb-dropdown tag="li" class="nav-item">
                    <mdb-dropdown-toggle left tag="a" navLink slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
                    <mdb-dropdown-menu right>
                      <mdb-dropdown-item>Action</mdb-dropdown-item>
                      <mdb-dropdown-item>Another action</mdb-dropdown-item>
                      <mdb-dropdown-item>Something else here</mdb-dropdown-item>
                    </mdb-dropdown-menu>
                  </mdb-dropdown>
                </mdb-navbar-nav>
              </mdb-navbar-toggler>
            </mdb-navbar>
            <!--/.Navbar-->
            <mdb-side-nav logo="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" sideNavClass="sn-bg-4" mask="strong" :OpenedFromOutside.sync="toggleA" hidden>
              <ul>
                <li>
                  <ul class="social">
                  <li><a href="#" class="icons-sm fb-ic"><mdb-icon fab icon="facebook-f" /></a></li>
                  <li><a href="#" class="icons-sm pin-ic"><mdb-icon fab icon="pinterest-p" /></a></li>
                  <li><a href="#" class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus-g" /></a></li>
                  <li><a href="#" class="icons-sm tw-ic"><mdb-icon fab icon="twitter" /></a></li>
                  </ul>
                </li>
                <li>
                  <form class="search-form" role="search">
                    <div class="form-group md-form mt-0 pt-1 ripple-parent" @click="wave">
                      <input type="text" class="form-control" placeholder="Search">
                    </div>
                  </form>
                </li>
                <li>
                  <mdb-side-nav-nav>
                    <mdb-side-nav-cat name="Submit blog" icon="chevron-right">
                      <mdb-side-nav-item href="#">Submit listing</mdb-side-nav-item>
                      <mdb-side-nav-item href="#">Registration form</mdb-side-nav-item>
                    </mdb-side-nav-cat>
                    <mdb-side-nav-cat name="Instruction" far icon="hand-pointer">
                      <mdb-side-nav-item href="#">For bloggers</mdb-side-nav-item>
                      <mdb-side-nav-item href="#">For authors</mdb-side-nav-item>
                    </mdb-side-nav-cat>
                    <mdb-side-nav-cat name="About" icon="eye">
                      <mdb-side-nav-item href="#">Introduction</mdb-side-nav-item>
                      <mdb-side-nav-item href="#">Monthly meetings</mdb-side-nav-item>
                    </mdb-side-nav-cat>
                    <mdb-side-nav-cat name="Contact me" far icon="envelope">
                      <mdb-side-nav-item href="#">FAQ</mdb-side-nav-item>
                      <mdb-side-nav-item href="#">Write a message</mdb-side-nav-item>
                    </mdb-side-nav-cat>
                    <mdb-side-nav-item header icon="envelope" href="#">Write a message</mdb-side-nav-item>
                    <mdb-side-nav-item header icon="user" href="#" @click.native="toggleSideNav('A')">Profile</mdb-side-nav-item>
                    <mdb-side-nav-item header icon="cubes" href="https://mdbootstrap.com/docs/vue/?utm_source=DemoApp&utm_medium=MDBVuePro" target="_blank">Official docs</mdb-side-nav-item>
                  </mdb-side-nav-nav>
                </li>
              </ul>
            </mdb-side-nav>
          </div>
        </template>
      

        <script>
          import { mdbNavbar, mdbDropdown, mdbDropdownMenu, mdbDropdownItem, mdbDropdownToggle, mdbNavbarBrand, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbInput, mdbBtn, mdbSideNav, mdbSubMenu, mdbIcon, waves, mdbSideNavItem, mdbSideNavCat, mdbSideNavNav } from 'mdbvue';
          export default {
            name: 'DoubleNavigationPage',
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbInput,
              mdbBtn,
              mdbSideNav,
              mdbSubMenu,
              mdbIcon,
              mdbNavbarBrand,
              mdbDropdown,
              mdbDropdownMenu,
              mdbDropdownItem,
              mdbDropdownToggle,
              mdbSideNavItem,
              mdbSideNavCat,
              mdbSideNavNav
            },
            data() {
              return {
                active: {
                  0: false
                },
                toggleA: true
              };
            },
            methods: {
              handleBtnAClick() {
                this.toggleA = !this.toggleA;
              },
              beforeEnter(el) {
                this.elHeight = el.scrollHeight;
              },
              enter(el) {
                el.style.height = this.elHeight+'px';
              },
              beforeLeave(el) {
                el.style.height = 0;
              }
            },
            mixins: [waves]
          };
        </script>
      

        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped>
          .navbar {
            z-index: 1050;
          }
          .side-nav {
            margin-top: 57px !important;
          }
        </style>
      

Double Navigation with slim SideNav and fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview

          <template>
            <mdb-container class="mdb-skin">
              <!--Navbar-->
              <mdb-navbar position="top" dark href="#" scrolling>
                <mdb-navbar-brand href="#" />
                <mdb-navbar-toggler>
                  <mdb-navbar-nav right>
                    <mdb-nav-item href="#!" waves-fixed>Home</mdb-nav-item>
                    <mdb-nav-item href="#!" waves-fixed>CSS</mdb-nav-item>
                    <mdb-nav-item href="#!" waves-fixed>Components</mdb-nav-item>
                    <mdb-nav-item href="#!" waves-fixed>Advanced</mdb-nav-item>
                  </mdb-navbar-nav>
                </mdb-navbar-toggler>
              </mdb-navbar>
              <!--/.Navbar-->
              <mdb-side-nav slim :isCollapsed="collapse" name="Anna Deynah" :OpenedFromOutside="true" logo="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" logoRound sideNavClass="sn-bg-1" mask="strong" hidden>
                <mdb-side-nav-nav>
                  <mdb-side-nav-cat name="Submit blog" icon="chevron-right">
                    <mdb-side-nav-item href="#" slimIcon="address-book">Submit listing</mdb-side-nav-item>
                    <mdb-side-nav-item href="#" slimIcon="address-card">Registration form</mdb-side-nav-item>
                  </mdb-side-nav-cat>
                  <mdb-side-nav-cat name="Instruction" far icon="hand-pointer">
                    <mdb-side-nav-item href="#" slimIcon="blog">For bloggers</mdb-side-nav-item>
                    <mdb-side-nav-item href="#" slimIcon="pen">For authors</mdb-side-nav-item>
                  </mdb-side-nav-cat>
                  <mdb-side-nav-cat name="About" icon="eye">
                    <mdb-side-nav-item href="#" slimIcon="handshake">Introduction</mdb-side-nav-item>
                    <mdb-side-nav-item href="#" slimIcon="tasks">Monthly meetings</mdb-side-nav-item>
                  </mdb-side-nav-cat>
                  <mdb-side-nav-cat name="Contact me" far icon="envelope">
                    <mdb-side-nav-item href="#">FAQ</mdb-side-nav-item>
                    <mdb-side-nav-item href="#" slimIcon="paper-plane" >Write a message</mdb-side-nav-item>
                  </mdb-side-nav-cat>
                  <mdb-side-nav-item icon="angle-double-left" open-icon="angle-double-right" toggler :isCollapsed="collapse" @toggle="toggleSlim" fixed>Minimize</mdb-side-nav-item>
                </mdb-side-nav-nav>
              </mdb-side-nav>
            </mdb-container>
          </template>
        

          <script>
            import { mdbSideNav, mdbSideNavNav, mdbSideNavCat, mdbSideNavItem, mdbContainer, mdbRow, mdbIcon, waves, mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbInput, mdbBtn, mdbSubMenu, mdbNavbarBrand } from 'mdbvue';
          
            export default {
              name: 'SideNavPage',
              components: {
                mdbSideNav,
                mdbSideNavNav,
                mdbSideNavCat,
                mdbSideNavItem,
                mdbContainer,
                mdbRow,
                mdbIcon,
                mdbNavbar,
                mdbNavItem,
                mdbNavbarNav,
                mdbNavbarToggler,
                mdbInput,
                mdbBtn,
                mdbSubMenu,
                mdbNavbarBrand
              },
              data(){
                return {
                  collapse: false,
                };
              },
              methods: {
                toggleSlim() {
                  this.collapse = !this.collapse;
                },
                beforeEnter(el) {
                  this.elHeight = el.scrollHeight;
                },
                enter(el) {
                  el.style.height = this.elHeight+'px';
                },
                beforeLeave(el) {
                  el.style.height = 0;
                }
              },
              mixins: [waves]
            };
          </script>