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>
    

Slim side-nav

Use slim property to mdb-side-nav component to create a slim version of the sidebar and add additional mdb-side-nav-item with toggler property to minimize menu. In your data, create property indicating the sidebar's current state and bind it with isCollapsed properties in mdb-side-nav and mdb-side-nav-item. For more detailed info and options, see the API tab of this section.


        <template>
          <div class="light-blue-skin">
            <mdb-side-nav slim :isCollapsed="collapsed" name="Anna Deynah" :OpenedFromOutside="true" logo="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" logoRound sideNavClass="sn-bg-1" mask="strong" hidden>
                <mdb-side-nav-nav>
                  <mdb-side-nav-cat name="Submit blog" icon="chevron-right">
                    <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="toggleSlim" toggler :collapsed="collapsed" fixed>Minimize</mdb-side-nav-item>
                </mdb-side-nav-nav>
            </mdb-side-nav>
          </div>
        </template>
      

        <script>
          import { mdbSideNav, mdbSideNavNav, mdbSideNavCat, mdbSideNavItem, mdbRow, waves } from 'mdbvue';
        
          export default {
            name: 'SideNavPage',
            components: {
              mdbSideNav,
              mdbSideNavNav,
              mdbSideNavCat,
              mdbSideNavItem,
              mdbRow
            },
            data(){
              return {
                collapsed: false,
              };
            },
            methods: {
              toggleSlim() {
                this.collapsed = !this.collapsed;
              }
            },
            mixins: [waves]
          };
        </script>
      

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 ... />
slim Boolean false Enables slim menu options for a sidenav <mdb-side-nav slim ... />
logoRound Boolean false Applies round mask to a logo <mdb-side-nav logoRound ... />
name String In slim version of a sidenav this property specifies a text displayed next to a logo - it will not be visible when sidenav is minimalized <mdb-side-nav name="Anna Deynah" ... />
isCollapsed Boolean false Indicates if a sidenav is minimalized. This property ought to be bound to the same piece of data as isCollapsed property from mdb-side-nav-item component <mdb-side-nav :isCollapsed="data" ... />

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 />
@toggle event Handler for this event should toggle isCollapsed properties of mdb-side-nav and mdb-side-nav-item <mdb-side-nav-item @toggle="toggleMenu" />
isCollapsed Boolean false Indicates if a sidenav is minimalized. This property ought to be bound to the same piece of data as isCollapsed property from mdb-side-nav component and controlled by @toggle handler <mdb-side-nav :isCollapsed="data" ... />
slim String This property enables providing shorter string which will be displayed once a sidenav is collapsed. If you prefer to display an icon instead, use slimIcon property <mdb-side-nav slim="info" ... />
slimIcon String Specifies if text should be replaced with an icon when a sidenav collapses. <mdb-side-nav slimIcon="envelope" ... />
toggler Boolean false allows to use given mdb-side-nav-item as a slim sidenav toggler <mdb-side-nav toggler ... />
openIcon String specifies which icon should be displayed once a toggler is minimalized. This way, it's possible to change direction of an arrow. <mdb-side-nav toggler icon="angle-double-right" openIcon="angle-double-left" ... />

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" />