Edit these docs 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">
            <mdb-navbar
              position="top"
              dark
              color="unique"
              class="darken-2"
              :toggler="false">
              <mdb-navbar-nav left class="side-toggler">
                <mdb-icon icon="bars" size="2x" @click.native="toggle=!toggle" />
              </mdb-navbar-nav>
              <mdb-navbar-nav class="nav-flex-icons" right>
                <mdb-nav-item
                    href="#"
                    waves-fixed
                    icon="code-branch"
                  >Code</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed icon="eye">Preview</mdb-nav-item>
                  <mdb-nav-item
                    href="#"
                    waves-fixed
                    icon="file-code"
                    far
                  >File</mdb-nav-item>
              </mdb-navbar-nav>
            </mdb-navbar>
            <!--/.Navbar-->
            <div class="light-blue-skin">
              <mdb-side-nav
                logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                sideNavClass="sn-bg-4"
                mask="dark"
                :OpenedFromOutside.sync="toggle"
                :breakWidth="900"
              >
                <ul>
                  <li>
                    <ul class="social">
                      <li>
                        <a href="#" class="icons-sm fb-ic">
                          <mdb-icon color="white" fab icon="facebook-f" />
                        </a>
                      </li>
                      <li>
                        <a href="#" class="icons-sm pin-ic">
                          <mdb-icon color="white" fab icon="pinterest-p" />
                        </a>
                      </li>
                      <li>
                        <a href="#" class="icons-sm gplus-ic">
                          <mdb-icon color="white" fab icon="google-plus-g" />
                        </a>
                      </li>
                      <li>
                        <a href="#" class="icons-sm tw-ic">
                          <mdb-icon color="white" 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">
                        <mdb-input type="text" 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="#">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>
            <div style="height: 100vh; margin-bottom: -25px">
              <div 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">
                        <h2 class="font-weight-bold">Double navigation with fixed sidenav & fixed navbar</h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      

        <script>
        import {
          mdbNavbar,
          mdbNavItem,
          mdbNavbarNav,
          mdbNavbarToggler,
          mdbDropdown,
          mdbDropdownItem,
          mdbDropdownMenu,
          mdbDropdownToggle,
          mdbInput,
          mdbBtn,
          mdbSideNav,
          mdbSideNavNav,
          mdbSideNavCat,
          mdbSideNavItem,
          mdbIcon,
          waves
        } from "mdbvue";
        
        export default {
          name: "DoubleNavigationPagev1",
          components: {
            mdbNavbar,
            mdbNavItem,
            mdbNavbarNav,
            mdbNavbarToggler,
            mdbDropdown,
            mdbDropdownItem,
            mdbDropdownMenu,
            mdbDropdownToggle,
            mdbInput,
            mdbBtn,
            mdbSideNav,
            mdbSideNavNav,
            mdbSideNavCat,
            mdbSideNavItem,
            mdbIcon
          },
          data() {
            return {
              toggle: false
            };
          },
          mixins: [waves]
        };
        </script>
      

        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped>
          .view {
            background: url("https://mdbootstrap.com/img/Photos/Others/img (44).jpg")
              no-repeat center center;
            background-size: cover;
            height: 100%;
          }
          .navbar i {
            cursor: pointer;
            color: white;
          }
          .flexible-content,
          .flexible-content .navbar {
            transition: margin-left 0.5s;
          }
          @media (min-width: 900px) {
            .flexible-content {
              margin-left: 240px;
            }
            .flexible-content .navbar {
              margin-left: 240px;
              padding-left: 20px;
            }
            .side-toggler {
              display: none;
            }
          }
      </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">
            <mdb-navbar
              light
              :toggler="false">
              <mdb-navbar-nav left class="side-toggler">
                <mdb-icon icon="bars" size="2x" style="color: black" @click.native="toggle=!toggle" />
              </mdb-navbar-nav>
              <mdb-navbar-nav class="nav-flex-icons" right>
                <mdb-nav-item
                  href="#"
                  waves-fixed
                  icon="code-branch"
                >Code</mdb-nav-item>
                <mdb-nav-item href="#" waves-fixed icon="eye">Preview</mdb-nav-item>
                <mdb-nav-item
                  href="#"
                  waves-fixed
                  icon="file-code"
                  far
                >Files</mdb-nav-item>
              </mdb-navbar-nav>
            </mdb-navbar>
            <!--/.Navbar-->
            <div class="white-skin">
              <mdb-side-nav
                logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                sideNavClass="sn-bg-4"
                mask="dark"
                :OpenedFromOutside.sync="toggle"
                :breakWidth="900"
              >
                <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">
                        <mdb-input type="text" 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="#">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>
            <div style="height: 90vh; margin-bottom: -25px">
              <div 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">
                        <h2 class="font-weight-bold">Double navigation with fixed sidenav & non-fixed navbar</h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      

        <script>
        import { mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbInput, mdbBtn, mdbSideNav, mdbSideNavNav, mdbSideNavCat, mdbSideNavItem, mdbIcon, waves } from 'mdbvue';
        
        export default {
          name: 'DoubleNavigationPagev1',
          components: {
            mdbNavbar,
            mdbNavItem,
            mdbNavbarNav,
            mdbNavbarToggler,
            mdbDropdown,
            mdbDropdownItem,
            mdbDropdownMenu,
            mdbDropdownToggle,
            mdbInput,
            mdbBtn,
            mdbSideNav,
            mdbSideNavNav,
            mdbSideNavCat,
            mdbSideNavItem,
            mdbIcon
          },
          data() {
            return {
              toggle: false
            };
          },
          mixins: [waves]
        };
        </script>
      

        <style scoped>
          .view {
            background: url("https://mdbootstrap.com/img/Photos/Others/img (45).jpg")no-repeat center center;
            background-size: cover;
            height: 100%;
          }
          .navbar i {
            cursor: pointer;
            color: white;
          }
          .flexible-content {
            transition: margin-left 0.5s ease-in;
          }
          @media (min-width: 900px) {
            .flexible-content {
              margin-left: 240px;
            }
            .side-toggler {
              display: none;
            }
          }
        </style>
      

Double Navigation with hidden SideNav & fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview

        <template>
          <div>
            <mdb-navbar
              position="top"
              dark
              color="mdb-color"
              class="darken-3"
              :toggler="false"
            >
              <mdb-navbar-nav left>
                <mdb-icon icon="bars" size="2x" @click.native="toggle = !toggle" />
              </mdb-navbar-nav>
              <mdb-navbar-nav class="nav-flex-icons" right>
                <mdb-nav-item
                    href="#"
                    waves-fixed
                    icon="code-branch"
                  >Code</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed icon="eye">Preview</mdb-nav-item>
                  <mdb-nav-item
                    href="#"
                    waves-fixed
                    icon="file-code"
                    far
                  >File</mdb-nav-item>
              </mdb-navbar-nav>
            </mdb-navbar>
            <!--/.Navbar-->
            <div class="mdb-skin">
              <mdb-side-nav
                logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                sideNavClass="sn-bg-4"
                mask="dark"
                :OpenedFromOutside.sync="toggle"
                hidden
              >
                <ul>
                  <li>
                    <ul class="social">
                      <li>
                        <a href="#" class="icons-sm fb-ic">
                          <mdb-icon color="white" fab icon="facebook-f" />
                        </a>
                      </li>
                      <li>
                        <a href="#" class="icons-sm pin-ic">
                          <mdb-icon color="white" fab icon="pinterest-p" />
                        </a>
                      </li>
                      <li>
                        <a href="#" class="icons-sm gplus-ic">
                          <mdb-icon color="white" fab icon="google-plus-g" />
                        </a>
                      </li>
                      <li>
                        <a href="#" class="icons-sm tw-ic">
                          <mdb-icon color="white" 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">
                        <mdb-input type="text" 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>
            <div style="height: 100vh; margin-bottom: -25px">
              <div 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">
                        <h2 class="font-weight-bold">Double navigation with hidden sidenav & fixed navbar</h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      

        <script>
          import {
            mdbNavbar,
            mdbNavItem,
            mdbNavbarNav,
            mdbInput,
            mdbSideNav,
            mdbSideNavNav,
            mdbSideNavCat,
            mdbSideNavItem,
            mdbIcon,
            waves,
          } from "mdbvue";
          
          export default {
            name: "DoubleNavigationPagev1",
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbInput,
              mdbSideNav,
              mdbSideNavNav,
              mdbSideNavCat,
              mdbSideNavItem,
              mdbIcon,
            },
            data() {
              return {
                toggle: false
              };
            },
            mixins: [waves]
          };
        </script>
      

        <style scoped>
          .view {
            background: url("https://mdbootstrap.com/img/Photos/Others/img (40).jpg")
              no-repeat center center;
            background-size: cover;
            height: 100%;
          }
          .navbar i {
            cursor: pointer;
            color: white;
          }
        </style>
      

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

Website with a regular fixed Navbar. Live preview

        <template>
          <div>
            <mdb-navbar
              dark
              color="grey"
              class="darken-3"
              :toggler="false"
            >
              <mdb-navbar-nav left>
                <mdb-icon icon="bars" size="2x" @click.native="toggle = !toggle" />
              </mdb-navbar-nav>
              <mdb-navbar-nav class="nav-flex-icons" right>
                <mdb-nav-item
                    href="#"
                    waves-fixed
                    icon="code-branch"
                  >Code</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed icon="eye">Preview</mdb-nav-item>
                  <mdb-nav-item
                    href="#"
                    waves-fixed
                    icon="file-code"
                    far
                  >File</mdb-nav-item>
              </mdb-navbar-nav>
            </mdb-navbar>
            <!--/.Navbar-->
            <div class="grey-skin">
              <mdb-side-nav
                logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                sideNavClass="sn-bg-4"
                mask="dark"
                :OpenedFromOutside.sync="toggle"
              >
                <ul>
                  <li>
                    <ul class="social">
                      <li>
                        <a href="#" class="icons-sm fb-ic">
                          <mdb-icon color="white" fab icon="facebook-f" />
                        </a>
                      </li>
                      <li>
                        <a href="#" class="icons-sm pin-ic">
                          <mdb-icon color="white" fab icon="pinterest-p" />
                        </a>
                      </li>
                      <li>
                        <a href="#" class="icons-sm gplus-ic">
                          <mdb-icon color="white" fab icon="google-plus-g" />
                        </a>
                      </li>
                      <li>
                        <a href="#" class="icons-sm tw-ic">
                          <mdb-icon color="white" 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">
                        <mdb-input type="text" 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>
            <div style="height: 90vh; margin-bottom: -25px">
              <div 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">
                        <h2
                          class="font-weight-bold"
                        >Double navigation with hidden sidenav & non-fixed navbar</h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      

        <script>
          import {
            mdbNavbar,
            mdbNavItem,
            mdbNavbarNav,
            mdbNavbarToggler,
            mdbDropdown,
            mdbDropdownItem,
            mdbDropdownMenu,
            mdbDropdownToggle,
            mdbInput,
            mdbBtn,
            mdbSideNav,
            mdbSideNavNav,
            mdbSideNavCat,
            mdbSideNavItem,
            mdbIcon,
            waves
          } from "mdbvue";
          
          export default {
            name: "DoubleNavigationPagev1",
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbDropdown,
              mdbDropdownItem,
              mdbDropdownMenu,
              mdbDropdownToggle,
              mdbInput,
              mdbBtn,
              mdbSideNav,
              mdbSideNavNav,
              mdbSideNavCat,
              mdbSideNavItem,
              mdbIcon
            },
            data() {
              return {
                toggle: false
              };
            },
            mixins: [waves]
          };
        </script>
      

        <style scoped>
          .view {
            background: url("https://mdbootstrap.com/img/Photos/Others/img (43).jpg")
              no-repeat center center;
            background-size: cover;
            height: 100%;
          }
          .navbar i {
            cursor: pointer;
            color: white;
          }
          
        </style>
      

Double Navigation with fixed SideNav under fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview

        <template>
          <div class="flexible-content">
            <mdb-navbar
              dark
              color="black"
              position="top"
              style="z-index: 1080;"
              :toggler="false"
            >
              <mdb-navbar-nav left class="side-toggler">
                <mdb-nav-item>
                  <mdb-icon icon="bars" size="lg" @click.native="toggle=!toggle" />
                </mdb-nav-item>
              </mdb-navbar-nav>
              <mdb-navbar-nav class="nav-flex-icons" right>
                <mdb-nav-item
                    href="#"
                    waves-fixed
                    icon="code-branch"
                  >Code</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed icon="eye">Preview</mdb-nav-item>
                  <mdb-nav-item
                    href="#"
                    waves-fixed
                    icon="file-code"
                    far
                  >File</mdb-nav-item>
              </mdb-navbar-nav>
            </mdb-navbar>
            <!--/.Navbar-->
            <div class="black-skin">
              <mdb-side-nav
                logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                sideNavClass="sn-bg-4"
                mask="dark"
                :OpenedFromOutside.sync="toggle"
                :breakWidth="900"
                sideNavStyle="top: 50px;"
              >
                <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">
                        <mdb-input type="text" 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="#">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>
            <div style="height: 100vh; margin-bottom: -25px">
              <div class="view intro-2">
                <div class="full-bg-img">
                  <div class="mask rgba-black-light flex-center">
                    <div class="container">
                      <div class="white-text text-center">
                        <h2
                          class="font-weight-bold"
                        >Double navigation with fixed sidenav under fixed navbar</h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      

        <script>
          import {
            mdbNavbar,
            mdbNavItem,
            mdbNavbarNav,
            mdbNavbarToggler,
            mdbDropdown,
            mdbDropdownItem,
            mdbDropdownMenu,
            mdbDropdownToggle,
            mdbInput,
            mdbBtn,
            mdbSideNav,
            mdbSideNavNav,
            mdbSideNavCat,
            mdbSideNavItem,
            mdbIcon,
            waves
          } from "mdbvue";
          
          export default {
            name: "DoubleNavigationPagev6",
            components: {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbDropdown,
              mdbDropdownItem,
              mdbDropdownMenu,
              mdbDropdownToggle,
              mdbInput,
              mdbBtn,
              mdbSideNav,
              mdbSideNavNav,
              mdbSideNavCat,
              mdbSideNavItem,
              mdbIcon
            },
            data() {
              return {
                toggle: false
              };
            },
            mixins: [waves]
          };
        </script>
      

        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped>
          .view {
            background: url("https://mdbootstrap.com/img/Photos/Others/img (51).jpg")
              no-repeat center center;
            background-size: cover;
            height: 100%;
          }
          .flexible-content,
          .flexible-content .navbar {
            transition: margin-left 0.5s;
          }

          @media (min-width: 900px) {
            .flexible-content {
              margin-left: 240px;
            }
            .side-toggler {
              display: none;
            }
          }
        </style>
      

Double Navigation with slim SideNav and fixed Navbar MDB Pro component

Website with a regular fixed Navbar. Live preview

          <template>
            <div class="flexible-content" :style="flexibleContentStyle">
              <mdb-navbar
                dark
                color="unique-color-dark"
                position="top"
                :toggler="false"
              >
                <mdb-navbar-nav class="nav-flex-icons" right>
                  <mdb-nav-item
                    href="#"
                    waves-fixed
                    icon="code-branch"
                  >Code</mdb-nav-item>
                  <mdb-nav-item href="#" waves-fixed icon="eye">Preview</mdb-nav-item>
                  <mdb-nav-item
                    href="#"
                    waves-fixed
                    icon="file-code"
                    far
                  >File</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar>
              <!--/.Navbar-->
              <div class="navy-blue-skin">
                <mdb-side-nav
                  slim
                  :isCollapsed="collapse"
                  name="Anna Deynah"
                  :breakWidth="0"
                  logo="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg"
                  logoRound
                  sideNavClass="sn-bg-1"
                  mask="strong"
                >
                  <mdb-side-nav-nav>
                    <mdb-side-nav-cat name="Submit blog" icon="chevron-down">
                      <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"
                      @toggle="collapse = !collapse"
                      toggler
                      :isCollapsed="collapse"
                      fixed
                    >Minimize</mdb-side-nav-item>
                  </mdb-side-nav-nav>
                </mdb-side-nav>
              </div>
              <div :style="contentStyle" class="page-content">
                <div 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">
                          <h2
                            class="font-weight-bold"
                          >Double navigation with fixed slim sidenav & fixed navbar</h2>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        

          <script>
            import {
              mdbNavbar,
              mdbNavItem,
              mdbNavbarNav,
              mdbNavbarToggler,
              mdbDropdown,
              mdbDropdownItem,
              mdbDropdownMenu,
              mdbDropdownToggle,
              mdbInput,
              mdbBtn,
              mdbSideNav,
              mdbSideNavNav,
              mdbSideNavCat,
              mdbSideNavItem,
              mdbIcon,
              waves
            } from "mdbvue";
            
            export default {
              name: "DoubleNavigationPagev1",
              components: {
                mdbNavbar,
                mdbNavItem,
                mdbNavbarNav,
                mdbNavbarToggler,
                mdbDropdown,
                mdbDropdownItem,
                mdbDropdownMenu,
                mdbDropdownToggle,
                mdbInput,
                mdbBtn,
                mdbSideNav,
                mdbSideNavNav,
                mdbSideNavCat,
                mdbSideNavItem,
                mdbIcon
              },
              data() {
                return {
                  toggle: false,
                  wide: true,
                  collapse: true,
                  flexibleContentStyle: false
                };
              },
              computed: {
                contentStyle() {
                  return `height: 100vh; margin-bottom: -25px; margin-left: ${this.collapse ? 60 : 240}px`;
                }
              },
              methods: {
                toggleCollapse() {
                  this.collapse = !this.collapse;
                  this.handleResize();
                }
              },
              mixins: [waves]
            };
          </script>
        

          <style scoped>
            .view {
              background: url("https://mdbootstrap.com/img/Photos/Others/img (44).jpg")
                no-repeat center center;
              background-size: cover;
              height: 100%;
            }
            .navbar i {
              cursor: pointer;
              color: white;
            }
            .flexible-content,
            .flexible-content .navbar {
              transition: margin-left 0.5s;
            }
            
            .page-content {
              transition: all 0.2s linear;
            }
          </style>