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


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%;
        }
        </style>

        <style>
        .navbar .dropdown-menu a:hover {
          color: inherit !important;
        }
        </style>

      

Regular non-fixed Navbar

Website with a regular fixed Navbar. Live preview

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

        (... script part the same as in the first example ...)
            
      

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 part the same as in the first example ...)

      

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 part the same as in the first example ...)

      

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 part the same as in the first example ...)

      

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 part the same as in the first example ...)

      

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 icon="facebook" /></a></li>
                <li><a href="#" class="icons-sm pin-ic"><mdb-icon icon="pinterest" /></a></li>
                <li><a href="#" class="icons-sm gplus-ic"><mdb-icon icon="google-plus" /></a></li>
                <li><a href="#" class="icons-sm tw-ic"><mdb-icon 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 icon="hand-pointer-o"></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 icon="envelope-o"></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 icon="facebook" /></a></li>
                <li><a href="#" class="icons-sm pin-ic"><mdb-icon icon="pinterest" /></a></li>
                <li><a href="#" class="icons-sm gplus-ic"><mdb-icon icon="google-plus" /></a></li>
                <li><a href="#" class="icons-sm tw-ic"><mdb-icon 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 icon="hand-pointer-o"></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 icon="envelope-o"></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 part the same as in the first Double Navigation example ...)

      

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 icon="facebook" /></a></li>
                <li><a href="#" class="icons-sm pin-ic"><mdb-icon icon="pinterest" /></a></li>
                <li><a href="#" class="icons-sm gplus-ic"><mdb-icon icon="google-plus" /></a></li>
                <li><a href="#" class="icons-sm tw-ic"><mdb-icon 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 icon="hand-pointer-o"></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 icon="envelope-o"></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 part the same as in the first Double Navigation example ...)

      

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 icon="facebook" /></a></li>
                <li><a href="#" class="icons-sm pin-ic"><mdb-icon icon="pinterest" /></a></li>
                <li><a href="#" class="icons-sm gplus-ic"><mdb-icon icon="google-plus" /></a></li>
                <li><a href="#" class="icons-sm tw-ic"><mdb-icon 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 icon="hand-pointer-o"></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 icon="envelope-o"></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 part the same as in the first Double Navigation example ...)