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.webp" 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" far>
<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" far>
<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
};
},
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).webp" 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
<script>
import {
mdbSideNav,
mdbSideNavNav,
mdbSideNavCat,
mdbSideNavItem
} from 'mdbvue';
</script>
API Reference: mdbSideNav Properties
API Reference: mdbSideNavCat Properties
API Reference: mdbSideNavItem Properties
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"
/> |