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



      <template>
        <mdb-container class="green-text">
          <div class="deep-purple-skin">
            <mdb-side-nav logo="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" sideNavClass="sn-bg-4" mask="strong" :OpenedFromOutside.sync="toggleA" hidden waves>
              <ul>
                <li>
                  <ul class="social">
                  <li><a href="#" class="icons-sm fb-ic"><mdb-icon fab icon="facebook" /></a></li>
                  <li><a href="#" class="icons-sm pin-ic"><mdb-icon fab icon="pinterest" /></a></li>
                  <li><a href="#" class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus" /></a></li>
                  <li><a href="#" class="icons-sm tw-ic"><mdb-icon fab icon="twitter" /></a></li>
                  </ul>
                </li>
                <li>
                  <form class="search-form" role="search">
                    <div class="form-group md-form mt-0 pt-1 ripple-parent" @click="wave">
                      <input type="text" class="form-control" placeholder="Search">
                    </div>
                  </form>
                </li>
                <li>
                  <mdb-side-nav-nav>
                    <mdb-side-nav-cat name="Submit blog" icon="chevron-right">
                      <mdb-side-nav-item href="#">Submit listing</mdb-side-nav-item>
                      <mdb-side-nav-item href="#">Registration form</mdb-side-nav-item>
                    </mdb-side-nav-cat>
                    <mdb-side-nav-cat name="Instruction" icon="hand-pointer-o">
                      <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" icon="envelope-o">
                      <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-nav>
                </li>
              </ul>
            </mdb-side-nav>
          </div>
          <div class="text-center icon-div">
            <mdb-icon icon="bars" size="5x" @click.native="toggleLeftSideNav"/>
          </div>
        </mdb-container>
      </template>
      
      <script>
        import { mdbSideNav, mdbSideNavNav, mdbSideNavCat, mdbSideNavItem, mdbContainer, mdbIcon, waves} from 'mdbvue';
      
        export default {
          name: 'SideNavPage',
          components: {
            mdbSideNav,
            mdbSideNavNav,
            mdbSideNavCat,
            mdbSideNavItem,
            mdbContainer,
            mdbIcon
          },
          data(){
            return {
              toggleA: false,
              waves: true
            };
          },
          methods: {
            toggleLeftSideNav() {
              this.toggleA = !this.toggleA;
            }
          },
          mixins: [waves]
        };
      </script>
      
      <style scoped>
        .container {
          height: 750px;
        }
        .icon-div {
          width: 49%;
          display: inline-block;
        }
        .icon-div .fa {
          cursor: pointer;
        }
      </style>

    

SideNav - API

In this section you will find advanced information about the SideNav component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.


Import statement


          import { mdbSideNav, mdbSideNavNav, mdbSideNavCat, mdbSideNavItem } from 'mdbvue';
      

API Reference: mdbSideNav Properties

Name Type Default Description Example
tag String 'div' Changes side-nav's wrapper tag <mdb-side-nav tag="ul" />
sideNavClass String Override or extend the styles applied to the component. <mdb-side-nav sideNavClass="example-class" ... />
fixed Boolean false Changes sidenav to fixed - it is always visible when windows is wider than it's breakpoint (1440px) <mdb-side-nav fixed ... />
hidden Boolean false Changes sidenav to hidden - it is always hidden, but can be opened by any toggler button <mdb-side-nav hidden ... />
right Boolean false Changes sidenav position to right <mdb-side-nav right ... />
logo String Enables logo wrapper and points to it's src attribute <mdb-side-nav logo="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" ... />
logoClass String Customize logo class <mdb-side-nav logoClass="example-class" ... />
href String '#' Customize href of logo wrapper <mdb-side-nav href="index" ... />
to String Apply 'to' prop in order to use router-link <mdb-side-nav to="/index" ... />
breakWidth Number 1440 Breakpoint for fixed sideNav <mdb-side-nav breakWidth="770" ... />
color String Background color of sideNav <mdb-side-nav color="indigo" ... />
darkWaves Boolean false Change waves into dark version <mdb-side-nav darkWaves ... />
mask String Add mask for sideNav component <mdb-side-nav mask="strong" ... />
logoSn Boolean false Changes logo wrapper class <mdb-side-nav logoSn ... />

API Reference: mdbSideNavCat Properties

Name Type Default Description Example
tag String 'li' Changes side-nav-cat's wrapper tag <mdb-side-nav-cat tag="li" />
name String Defines category name <mdb-side-nav-cat name="Category" />
icon String Defines category icon <mdb-side-nav-cat icon="user" />
wrapperClass String Defines category wrapperClass <mdb-side-nav-cat wrapperClass="example-class" />
show Boolean true Opens category list by default <mdb-side-nav-cat show />

API Reference: mdbSideNavItem Properties

Name Type Default Description Example
tag String 'li' Changes side-nav-item's wrapper tag <mdb-side-nav-item tag="ul" />
href String '#' Customize href attribute <mdb-side-nav-item href="index" ... />
to String Apply 'to' prop in order to use router-link <mdb-side-nav-item to="/index" ... />
icon String Defines item's icon <mdb-side-nav-item icon="user" />
header Boolean false Makes item behaves as category element (header) <mdb-side-nav-item header />

API Reference: Methods

Name Parameters Description Example
v-on:OpenedFromOutside.sync value Apply true or false to show or hide sideNav <mdb-side-nav :OpenedFromOutside.sync="toggle" />