Rate this docs

Vue Bootstrap Sidenav MDB Pro component

Vue Sidenav - Bootstrap 4 & Material Design

Vue Bootstrap sidenav is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.

By virtue of its clarity and simplicity it remarkably increases User Experience. It allows you to navigate through small applications as well as vast portals swiftly. Multiple link embedding functionality enables you to implement more advanced content categorisation, which is almost essential within bigger projects.

Thanks to MDB you can easily implement SideNav in your own projects, by using one of various, alluring Side Menus.

Navigation on the left is a live demo of SideNav.


How it looks on a mobile device:



SideNav examples

Click on the images below to see live preview



Basic usage


      <div :style="{height: '45%'}"></div>
        <div class="text-center icon-div">
          <mdb-icon icon="bars" size="5x" @click.native="handleBtnAClick"/></div>
        <div class="text-center icon-div">
          <mdb-icon icon="bars" size="5x" @click.native="handleBtnBClick"/></div>
        <mdb-side-nav
          logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
          :OpenedFromOutside.sync="toggleA"
          color="cyan darken-4"
          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>
        <mdb-side-nav logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                  :OpenedFromOutside.sync="toggleB"
                  class="side-nav-light"
                  hidden
                  waves
                  right>
        <ul>
          <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>
          <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>
        </ul>
      </mdb-side-nav>

      import { SideNav, Btn, Container, Fa, SubMenu, waves } from 'mdbvue';

      export default {
        name: 'SideNavPage',
        props: {
          waves: {
            type: Boolean,
            default: true
          }
        },
        components: {
          SideNav,
          Btn,
          Container,
          Fa,
          SubMenu,
        },
        data(){
          return {
            toggleA: false,
            toggleB: false,
            active: 0,
            elHeight: 0
          };
        },
        methods: {
          handleBtnAClick() {
            this.toggleA = !this.toggleA;
          },
          handleBtnBClick() {
            this.toggleB = !this.toggleB;
          },
          beforeEnter(el) {
            this.elHeight = el.scrollHeight;
          },
          enter(el) {
            el.style.height = this.elHeight+'px';
          },
          beforeLeave(el) {
            el.style.height = 0;
          }
        },
        mixins: [waves]
      };