Bootstrap navigation

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

<script>
import { Navbar, NavbarItem, NavbarNav, NavbarCollapse, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, mdbInput, Btn, waves, mdbNavbarBrand } from 'mdbvue';

export default {
  name: 'NavigationPage',
  components: {
    Navbar,
    NavbarItem,
    NavbarNav,
    NavbarCollapse,
    Dropdown,
    DropdownItem,
    DropdownMenu,
    DropdownToggle,
    mdbInput,
    Btn,
    waves,
    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-->
<navbar dark color="primary">
  <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
  <navbar-collapse>
    <navbar-nav>
      <navbar-item href="#" waves-fixed>Home</navbar-item>
      <navbar-item href="#" waves-fixed>Features</navbar-item>
      <navbar-item href="#" waves-fixed>Pricing</navbar-item>
      <!-- Dropdown -->
      <dropdown tag="li" class="nav-item">
        <dropdown-toggle tag="a" navLink color="primary" slot="toggle" waves-fixed>Dropdown</dropdown-toggle>
        <dropdown-menu v-show="active[0]">
          <dropdown-item>Action</dropdown-item>
          <dropdown-item>Another action</dropdown-item>
          <dropdown-item>Something else here</dropdown-item>
        </dropdown-menu>
      </dropdown>
    </navbar-nav>
    <!-- Search form -->
    <form>
      <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
    </form>
  </navbar-collapse>
</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-->
    <navbar position="top" dark color="primary" scrolling>
      <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
      <navbar-collapse>
        <navbar-nav>
          <navbar-item href="#" waves-fixed>Home</navbar-item>
          <navbar-item href="#" waves-fixed>Features</navbar-item>
          <navbar-item href="#" waves-fixed>Pricing</navbar-item>
          <!-- Dropdown -->
          <dropdown tag="li" class="nav-item">
            <dropdown-toggle tag="a" navLink color="primary" slot="toggle" waves-fixed>Dropdown</dropdown-toggle>
            <dropdown-menu v-show="active[0]">
              <dropdown-item>Action</dropdown-item>
              <dropdown-item>Another action</dropdown-item>
              <dropdown-item>Something else here</dropdown-item>
            </dropdown-menu>
          </dropdown>
        </navbar-nav>
        <!-- Search form -->
        <form>
          <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
        </form>
      </navbar-collapse>
    </navbar>
    <!--/.Navbar-->
    <div style="height: 100vh">
      <div v-show="content" class="view intro-2">
        <div class="full-bg-img">
          <div class="mask rgba-black-strong flex-center">
            <div class="container">
              <div class="white-text text-center wow fadeInUp">
                <h2>This is test message</h2>
              </div>
            </div>
          </div>
        </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-->
    <navbar dark color="primary">
      <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
      <navbar-collapse>
        <navbar-nav>
          <navbar-item href="#" waves-fixed>Home</navbar-item>
          <navbar-item href="#" waves-fixed>Features</navbar-item>
          <navbar-item href="#" waves-fixed>Pricing</navbar-item>
          <!-- Dropdown -->
          <dropdown tag="li" class="nav-item">
            <dropdown-toggle tag="a" navLink color="primary" slot="toggle" waves-fixed>Dropdown</dropdown-toggle>
            <dropdown-menu v-show="active[0]">
              <dropdown-item>Action</dropdown-item>
              <dropdown-item>Another action</dropdown-item>
              <dropdown-item>Something else here</dropdown-item>
            </dropdown-menu>
          </dropdown>
        </navbar-nav>
        <!-- Search form -->
        <form>
          <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
        </form>
      </navbar-collapse>
    </navbar>
    <!--/.Navbar-->
    <div style="height: 100vh">
      <div v-show="content" class="view intro-2">
        <div class="full-bg-img">
          <div class="mask rgba-black-strong flex-center">
            <div class="container">
              <div class="white-text text-center wow fadeInUp">
                <h2>This is test message</h2>
              </div>
            </div>
          </div>
        </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-->
    <navbar dark color="primary" position="top" transparent>
      <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
      <navbar-collapse>
        <navbar-nav>
          <navbar-item href="#" waves-fixed>Home</navbar-item>
          <navbar-item href="#" waves-fixed>Features</navbar-item>
          <navbar-item href="#" waves-fixed>Pricing</navbar-item>
          <!-- Dropdown -->
          <dropdown tag="li" class="nav-item">
            <dropdown-toggle tag="a" navLink color="primary" slot="toggle" waves-fixed>Dropdown</dropdown-toggle>
            <dropdown-menu v-show="active[0]">
              <dropdown-item>Action</dropdown-item>
              <dropdown-item>Another action</dropdown-item>
              <dropdown-item>Something else here</dropdown-item>
            </dropdown-menu>
          </dropdown>
        </navbar-nav>
        <!-- Search form -->
        <form>
          <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
        </form>
      </navbar-collapse>
    </navbar>
    <!--/.Navbar-->
    <div style="height: 100vh">
      <div v-show="content" class="view intro-2">
        <div class="full-bg-img">
          <div class="mask rgba-black-strong flex-center">
            <div class="container">
              <div class="white-text text-center wow fadeInUp">
                <h2>This is test message</h2>
              </div>
            </div>
          </div>
        </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-->
    <navbar dark color="primary" style="margin-bottom: -60px; z-index: 1" transparent>
      <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
      <navbar-collapse>
        <navbar-nav>
          <navbar-item href="#" waves-fixed>Home</navbar-item>
          <navbar-item href="#" waves-fixed>Features</navbar-item>
          <navbar-item href="#" waves-fixed>Pricing</navbar-item>
          <!-- Dropdown -->
          <dropdown tag="li" class="nav-item">
            <dropdown-toggle  tag="a" navLink color="primary" slot="toggle" waves-fixed>Dropdown</dropdown-toggle>
            <dropdown-menu v-show="active[0]">
              <dropdown-item>Action</dropdown-item>
              <dropdown-item>Another action</dropdown-item>
              <dropdown-item>Something else here</dropdown-item>
            </dropdown-menu>
          </dropdown>
        </navbar-nav>
        <!-- Search form -->
        <form>
          <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
        </form>
      </navbar-collapse>
    </navbar>
    <!--/.Navbar-->
    <div style="height: 100vh">
      <div v-show="content" class="view intro-2">
        <div class="full-bg-img">
          <div class="mask rgba-black-strong flex-center">
            <div class="container">
              <div class="white-text text-center wow fadeInUp">
                <h2>This is test message</h2>
              </div>
            </div>
          </div>
        </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-->
    <navbar position="top" dark color="primary" scrolling>
      <mdb-navbar-brand href="#">Your Logo</mdb-navbar-brand>
      <navbar-collapse>
        <navbar-nav>
          <fa icon="bars" size="2x" @click.native="handleBtnAClick"/>
        </navbar-nav>
        <navbar-nav right>
          <navbar-item href="#!" waves-fixed>Home</navbar-item>
          <navbar-item href="#!" waves-fixed>CSS</navbar-item>
          <navbar-item href="#!" waves-fixed>Components</navbar-item>
          <navbar-item href="#!" waves-fixed>Advanced</navbar-item>
        </navbar-nav>
      </navbar-collapse>
    </navbar>
    <!--/.Navbar-->
    <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"><fa icon="facebook" /></a></li>
        <li><a href="#" class="icons-sm pin-ic"><fa icon="pinterest" /></a></li>
        <li><a href="#" class="icons-sm gplus-ic"><fa icon="google-plus" /></a></li>
        <li><a href="#" class="icons-sm tw-ic"><fa 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">
              <fa icon="chevron-right"/> Submit blog<fa icon="angle-down" class="rotate-icon" :class="active === 1 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 2 ? active = 0 : active = 2">
              <fa icon="hand-pointer-o"></fa> Instruction<fa icon="angle-down" class="rotate-icon" :class="active === 2 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 3 ? active = 0 : active = 3">
              <fa icon="eye"></fa> About<fa icon="angle-down" class="rotate-icon" :class="active === 3 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 4 ? active = 0 : active = 4">
              <fa icon="envelope-o"></fa> Contact me<fa icon="angle-down" class="rotate-icon" :class="active === 4 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
        </ul>
      </li>
    </side-nav>
  </div>
</template>

<script>
import { Navbar, NavbarItem, NavbarNav, NavbarCollapse, mdbInput, Btn, SideNav, SubMenu, Fa, waves } from 'mdbvue';

export default {
  name: 'DoubleNavigationPage',
  components: {
    Navbar,
    NavbarItem,
    NavbarNav,
    NavbarCollapse,
    mdbInput,
    Btn,
    SideNav,
    SubMenu,
    Fa
  },
  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-->
    <navbar dark color="primary" href="#" scrolling>
      <navbar-collapse>
        <navbar-nav>
          <fa icon="bars" size="2x" @click.native="handleBtnAClick"/>
        </navbar-nav>
        <navbar-nav right>
          <navbar-item href="#!" waves-fixed>Home</navbar-item>
          <navbar-item href="#!" waves-fixed>CSS</navbar-item>
          <navbar-item href="#!" waves-fixed>Components</navbar-item>
          <navbar-item href="#!" waves-fixed>Advanced</navbar-item>
        </navbar-nav>
      </navbar-collapse>
    </navbar>
    <!--/.Navbar-->
    <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"><fa icon="facebook" /></a></li>
        <li><a href="#" class="icons-sm pin-ic"><fa icon="pinterest" /></a></li>
        <li><a href="#" class="icons-sm gplus-ic"><fa icon="google-plus" /></a></li>
        <li><a href="#" class="icons-sm tw-ic"><fa 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">
              <fa icon="chevron-right"/> Submit blog<fa icon="angle-down" class="rotate-icon" :class="active === 1 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 2 ? active = 0 : active = 2">
              <fa icon="hand-pointer-o"></fa> Instruction<fa icon="angle-down" class="rotate-icon" :class="active === 2 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 3 ? active = 0 : active = 3">
              <fa icon="eye"></fa> About<fa icon="angle-down" class="rotate-icon" :class="active === 3 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 4 ? active = 0 : active = 4">
              <fa icon="envelope-o"></fa> Contact me<fa icon="angle-down" class="rotate-icon" :class="active === 4 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
        </ul>
      </li>
    </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-->
    <navbar position="top" dark color="primary" href="#" scrolling>
      <mdb-navbar-brand href="#" />
      <navbar-collapse>
        <navbar-nav>
          <fa icon="bars" size="2x" @click.native="handleBtnAClick"/>
        </navbar-nav>
        <navbar-nav right>
          <navbar-item href="#!" waves-fixed>Home</navbar-item>
          <navbar-item href="#!" waves-fixed>CSS</navbar-item>
          <navbar-item href="#!" waves-fixed>Components</navbar-item>
          <navbar-item href="#!" waves-fixed>Advanced</navbar-item>
        </navbar-nav>
      </navbar-collapse>
    </navbar>
    <!--/.Navbar-->
    <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"><fa icon="facebook" /></a></li>
        <li><a href="#" class="icons-sm pin-ic"><fa icon="pinterest" /></a></li>
        <li><a href="#" class="icons-sm gplus-ic"><fa icon="google-plus" /></a></li>
        <li><a href="#" class="icons-sm tw-ic"><fa 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">
              <fa icon="chevron-right"/> Submit blog<fa icon="angle-down" class="rotate-icon" :class="active === 1 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 2 ? active = 0 : active = 2">
              <fa icon="hand-pointer-o"></fa> Instruction<fa icon="angle-down" class="rotate-icon" :class="active === 2 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 3 ? active = 0 : active = 3">
              <fa icon="eye"></fa> About<fa icon="angle-down" class="rotate-icon" :class="active === 3 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 4 ? active = 0 : active = 4">
              <fa icon="envelope-o"></fa> Contact me<fa icon="angle-down" class="rotate-icon" :class="active === 4 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
        </ul>
      </li>
    </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-->
    <navbar dark color="primary" scrolling>
      <mdb-navbar-brand href="#" />
      <navbar-collapse>
        <navbar-nav>
          <fa icon="bars" size="2x" @click.native="handleBtnAClick"/>
        </navbar-nav>
        <navbar-nav right>
          <navbar-item href="#!" waves-fixed>Home</navbar-item>
          <navbar-item href="#!" waves-fixed>CSS</navbar-item>
          <navbar-item href="#!" waves-fixed>Components</navbar-item>
          <navbar-item href="#!" waves-fixed>Advanced</navbar-item>
        </navbar-nav>
      </navbar-collapse>
    </navbar>
    <!--/.Navbar-->
    <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"><fa icon="facebook" /></a></li>
        <li><a href="#" class="icons-sm pin-ic"><fa icon="pinterest" /></a></li>
        <li><a href="#" class="icons-sm gplus-ic"><fa icon="google-plus" /></a></li>
        <li><a href="#" class="icons-sm tw-ic"><fa 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">
              <fa icon="chevron-right"/> Submit blog<fa icon="angle-down" class="rotate-icon" :class="active === 1 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 2 ? active = 0 : active = 2">
              <fa icon="hand-pointer-o"></fa> Instruction<fa icon="angle-down" class="rotate-icon" :class="active === 2 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 3 ? active = 0 : active = 3">
              <fa icon="eye"></fa> About<fa icon="angle-down" class="rotate-icon" :class="active === 3 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 4 ? active = 0 : active = 4">
              <fa icon="envelope-o"></fa> Contact me<fa icon="angle-down" class="rotate-icon" :class="active === 4 ? 'rotated' : ''"/></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <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>
              </sub-menu>
            </transition>
          </li>
        </ul>
      </li>
    </side-nav>
  </div>
</template>

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