Vue Bootstrap Sidenav 2 MDB Pro component
Vue Sidenav 2 - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
The mdbSideNav2 component is the new take on the side navigation - it's more flexible and simpler to use than its previous version. In the following steps, you'll learn how to use it for creating responsive layouts, rendering data from API and displaying entirely custom content.
This documentation may contain syntax introduced in the MDB Vue 6.7.0 and can be incompatible with previous versions. For old side nav documentation please follow the link.
Positioning
There are three ways of positioning your side navigation:
- side - default version, it shrinks the remaining area
- over - opens over the page's content
- push - pushes the content of its way by adding negative margins to the content's wrapper
You can combine those styles easily by changing the value of properties, for example, depending on the user's screen width.
By default all of this options can be toggled by user - f.e. by pressing the
esc key. You can always change that behavior by replacing
v-model directive with a value property.
Creating responsive layouts
The side and push versions requires adding additional offsets to some
elements on your webpage - typically nav,
main and footer. There are two ways of
controlling it - the first, simpler one, is to wrap the sidenav around
you app and place nav, main and footer elements inside the dedicated slots:
<template>
<mdb-side-nav-2>
<nav slot="nav">
<!-- Your navigation here -->
</nav>
<main slot="main">
<!-- Your main content (router, f.e) here -->
</main>
<footer slot="footer">
<!-- Your footer here -->
</footer>
</mdb-side-nav-2>
</template>
This way the component takes care of adding those offsets when neccessary.
Sometimes you need to customize the default behaviour or structure your
app diferentely. In this case, you can use @setOffset event emitted by
the component every time the side navigation is being toggled or enters
slim mode.
<template>
<mdb-side-nav-2 :data="..." @setOffset="setOffset" />
</template>
The event's payload is the number of pixels which is needed for the sidenav to fit beside the page's content
Side View demo
The default position - recommended especially for larger screens. The content can get a little squized on smaller screens, so in the example below we've used the mdb-resize directive to change the position to push on smaller devices:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum purus non convallis fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque commodo libero non nulla pretium elementum id quis dui. Donec pretium lorem vitae viverra molestie. Cras dictum nulla ac nibh tincidunt viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent molestie magna nec felis interdum, eget ullamcorper risus vehicula. Nulla faucibus, ligula dignissim tristique ornare, enim purus convallis lectus, a bibendum lectus erat sit amet ipsum. Aenean elementum malesuada leo, eget convallis magna faucibus vitae. Sed fermentum hendrerit mauris vitae ullamcorper. Maecenas interdum, orci vitae convallis convallis, nisi tortor fermentum erat, fringilla pharetra ipsum nunc eu urna. Praesent accumsan ligula vel ligula blandit porttitor. Curabitur sit amet est quis quam commodo lobortis. Mauris congue laoreet mollis. Ut congue velit elit, luctus ultrices libero luctus aliquam. Suspendisse consequat massa at ante eleifend, et finibus metus hendrerit. Fusce elit odio, vestibulum eu velit id, faucibus consectetur mi. Vivamus eget porttitor libero, eget tincidunt mi. Ut rutrum urna lorem, sit amet gravida nunc ultrices nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ligula mi, malesuada id suscipit ac, ornare nec elit. Suspendisse at augue in metus maximus laoreet. Vivamus egestas volutpat vestibulum. Mauris porttitor nisi eu turpis volutpat consectetur. Nunc ultricies nulla gravida, gravida lorem vitae, consequat velit. Nullam suscipit arcu eu lectus feugiat, at accumsan metus venenatis. Proin et tortor ex. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed in neque ut urna egestas commodo sit amet pulvinar orci. Nulla facilisi. Suspendisse ligula velit, tempor nec mollis nec, dignissim sit amet mi. Quisque sit amet nibh quam. Aliquam eu risus at magna tristique molestie a a eros. Praesent quis ornare libero, vitae molestie orci. Sed luctus sem a massa faucibus aliquet. Nam fermentum eros eget risus suscipit pharetra. Ut ac nisl ipsum. Nunc maximus urna nec ipsum pulvinar, ac ultricies magna sagittis. Sed semper odio turpis, sed sodales ante efficitur quis. Vivamus tincidunt, ipsum non tristique elementum, dolor eros vehicula leo, sit amet lobortis enim lectus ac dui. Vestibulum ut nisl nec nunc pharetra euismod at non odio. Donec vestibulum condimentum sagittis. Nunc quis tortor at libero maximus euismod. In non tortor consectetur, tristique lectus in, pulvinar metus. Vivamus interdum magna magna, id imperdiet tortor accumsan sed. Vestibulum vitae mauris ac lectus faucibus efficitur vitae quis ligula. Nam vel placerat turpis. Nam luctus suscipit pretium. Ut ut tristique tellus. Duis imperdiet condimentum accumsan. Nunc sodales ultrices dolor sed commodo. In quam arcu, maximus non enim quis, cursus feugiat erat. Etiam sollicitudin semper libero et dictum.
<template>
<div v-mdb-resize:start="checkWidth">
<mdb-side-nav-2 v-model="show" :data="navigation" color="white" :over="over"
:sidenav-class="['grey', 'darken-3']">
<div slot="header" class="mt-5">
<div class="p-5">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.webp" class="img-fluid" />
</div>
<hr />
<ul class="list-unstyled d-flex justify-content-center">
<li>
<a href="#" class="px-3 icons-sm fb-ic">
<mdb-icon color="white" fab icon="facebook-f" />
</a>
</li>
<li>
<a href="#" class="px-3 icons-sm pin-ic">
<mdb-icon color="white" fab icon="pinterest-p" />
</a>
</li>
<li>
<a href="#" class="px-3 icons-sm gplus-ic">
<mdb-icon color="white" fab icon="google-plus-g" />
</a>
</li>
<li>
<a href="#" class="px-3 icons-sm tw-ic">
<mdb-icon color="white" fab icon="twitter" />
</a>
</li>
</ul>
<hr />
</div>
<mdb-navbar slot="nav" tag="div" position="top" color="teal" class="darken-4" dark :toggler="false"
:style="{ zIndex: '1061' }">
<mdb-navbar-nav left>
<mdb-icon icon="bars" class="white-text" size="lg" @click.native="show = !show" />
</mdb-navbar-nav>
<mdb-navbar-nav class="nav-flex-icons" right>
<mdb-nav-item to="/navigation/pro/double-navigation-v1" waves-fixed icon="code-branch">
<span class="ml-1">v.1</span></mdb-nav-item>
<mdb-nav-item to="/navigation/pro/double-navigation-v2" waves-fixed icon="eye">
<span class="ml-1">v.2</span></mdb-nav-item>
<mdb-nav-item to="/navigation/pro/double-navigation-v3" waves-fixed icon="file-code" far>
<span class="ml-1">v.3</span></mdb-nav-item>
<mdb-nav-item to="/navigation/pro/double-navigation-v4" waves-fixed icon="terminal">
<span class="ml-1">v.4</span></mdb-nav-item>
<mdb-nav-item to="/navigation/pro/double-navigation-v5" waves-fixed icon="smile" far>
<span class="ml-1">v.5</span></mdb-nav-item>
<mdb-nav-item to="/navigation/pro/double-navigation-v6" waves-fixed icon="user" far active>
<span class="ml-1">v.6</span></mdb-nav-item>
</mdb-navbar-nav>
</mdb-navbar>
<div style="height: 100vh" slot="main">
<div class="view intro-2">
<div class="full-bg-img">
<div class="mask rgba-white-strong flex-center">
<div class="container">
<div class="dark-grey-text ">
<h2 class="font-weight-bold">
Double navigation v.6
</h2>
<hr />
<h3>
<strong>Navbar:</strong> <u>Fixed</u>, positioned
over the Sidenav
</h3>
<h3>
<strong>Sidenav:</strong> <u>Side</u> (changing to
<u>Over</u> below 900px breakpoint)
</h3>
<mdb-btn rounded color="grey" class="mt-5">
<router-link to="/navigation" class="white-text">Go back to the navigation menu
</router-link>
</mdb-btn>
</div>
</div>
</div>
</div>
</div>
</div>
</mdb-side-nav-2>
</div>
</template>
<script>
import {
mdbNavbar,
mdbNavItem,
mdbNavbarNav,
mdbSideNav2,
mdbBtn,
mdbIcon,
mdbResize
} from "mdbvue";
export default {
name: "DoubleNavigationPagev1",
components: {
mdbNavbar,
mdbNavItem,
mdbNavbarNav,
mdbSideNav2,
mdbBtn,
mdbIcon
},
data() {
return {
show: false,
over: false,
navigation: [{
name: "Double navigation",
icon: "bars",
children: [{
name: "Version 1",
to: "/navigation/pro/double-navigation-v1"
},
{
name: "Version 2",
to: "/navigation/pro/double-navigation-v2"
},
{
name: "Version 3",
to: "/navigation/pro/double-navigation-v3"
},
{
name: "Version 4",
to: "/navigation/pro/double-navigation-v4"
},
{
name: "Version 5",
to: "/navigation/pro/double-navigation-v5"
},
{
name: "Version 6",
to: "/navigation/pro/double-navigation-v6"
}
]
},
{
name: "Getting started",
icon: "mdb",
fab: true,
children: [{
name: "Quick start",
href: "https://mdbootstrap.com/docs/b4/vue/getting-started/quick-start/"
},
{
name: "Technical Support",
href: "https://mdbootstrap.com/support/"
}
]
},
{
name: "Documentation",
icon: "graduation-cap",
href: "https://mdbootstrap.com/docs/b4/vue/"
}
]
};
},
methods: {
checkWidth() {
this.over = window.innerWidth < 900;
}
},
directives: {
mdbResize
}
};
</script>
<style scoped>
.view {
background: url("https://mdbootstrap.com/img/Photos/Others/img (52).webp") no-repeat center center;
background-size: cover;
height: 100%;
}
.navbar i {
cursor: pointer;
color: white;
}
</style>
Push View demo
This options pushes the content out of its way by adding negative margin's value.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum purus non convallis fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque commodo libero non nulla pretium elementum id quis dui. Donec pretium lorem vitae viverra molestie. Cras dictum nulla ac nibh tincidunt viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent molestie magna nec felis interdum, eget ullamcorper risus vehicula. Nulla faucibus, ligula dignissim tristique ornare, enim purus convallis lectus, a bibendum lectus erat sit amet ipsum. Aenean elementum malesuada leo, eget convallis magna faucibus vitae. Sed fermentum hendrerit mauris vitae ullamcorper. Maecenas interdum, orci vitae convallis convallis, nisi tortor fermentum erat, fringilla pharetra ipsum nunc eu urna. Praesent accumsan ligula vel ligula blandit porttitor. Curabitur sit amet est quis quam commodo lobortis. Mauris congue laoreet mollis. Ut congue velit elit, luctus ultrices libero luctus aliquam. Suspendisse consequat massa at ante eleifend, et finibus metus hendrerit. Fusce elit odio, vestibulum eu velit id, faucibus consectetur mi. Vivamus eget porttitor libero, eget tincidunt mi. Ut rutrum urna lorem, sit amet gravida nunc ultrices nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ligula mi, malesuada id suscipit ac, ornare nec elit. Suspendisse at augue in metus maximus laoreet. Vivamus egestas volutpat vestibulum. Mauris porttitor nisi eu turpis volutpat consectetur. Nunc ultricies nulla gravida, gravida lorem vitae, consequat velit. Nullam suscipit arcu eu lectus feugiat, at accumsan metus venenatis. Proin et tortor ex. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed in neque ut urna egestas commodo sit amet pulvinar orci. Nulla facilisi. Suspendisse ligula velit, tempor nec mollis nec, dignissim sit amet mi. Quisque sit amet nibh quam. Aliquam eu risus at magna tristique molestie a a eros. Praesent quis ornare libero, vitae molestie orci. Sed luctus sem a massa faucibus aliquet. Nam fermentum eros eget risus suscipit pharetra. Ut ac nisl ipsum. Nunc maximus urna nec ipsum pulvinar, ac ultricies magna sagittis. Sed semper odio turpis, sed sodales ante efficitur quis. Vivamus tincidunt, ipsum non tristique elementum, dolor eros vehicula leo, sit amet lobortis enim lectus ac dui. Vestibulum ut nisl nec nunc pharetra euismod at non odio. Donec vestibulum condimentum sagittis. Nunc quis tortor at libero maximus euismod. In non tortor consectetur, tristique lectus in, pulvinar metus. Vivamus interdum magna magna, id imperdiet tortor accumsan sed. Vestibulum vitae mauris ac lectus faucibus efficitur vitae quis ligula. Nam vel placerat turpis. Nam luctus suscipit pretium. Ut ut tristique tellus. Duis imperdiet condimentum accumsan. Nunc sodales ultrices dolor sed commodo. In quam arcu, maximus non enim quis, cursus feugiat erat. Etiam sollicitudin semper libero et dictum.
<template>
<div>
<!--/.Navbar-->
<mdb-side-nav-2 :value="true" :data="navigation" push slim :slim-collapsed="collapsed"
@toggleSlim="collapsed = $event" sidenav-class="unique-color-dark" color="white">
<div slot="header">
<div class="d-flex align-items-center my-4" :class="
collapsed ? 'justify-content-center' : 'justify-content-start'
">
<mdb-avatar :width="40" style="flex: 0 0 auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-7.webp"
class="img-fluid rounded-circle z-depth-1" />
</mdb-avatar>
<p class="m-t mb-0 ml-4 p-0" style="flex: 0 2 auto" v-show="!collapsed">
<strong>John Smith
<mdb-icon color="success" icon="circle" class="ml-2" size="sm" /></strong>
</p>
</div>
<hr class="w-100" />
</div>
<div slot="content" class="mt-5 d-flex justify-content-center">
<mdb-btn tag="a" class="mx-0" size="sm" transparent floating
:icon="collapsed ? 'chevron-right' : 'chevron-left'" icon-class="white-text"
@click="collapsed = !collapsed"></mdb-btn>
</div>
<mdb-navbar slot="nav" tag="div" :toggler="false" position="top" dark color="unique-color-dark">
<mdb-navbar-nav class="nav-flex-icons" right>
<mdb-nav-item to="/navigation/pro/double-navigation-v1" waves-fixed icon="code-branch">
<span class="ml-1">v.1</span></mdb-nav-item>
<mdb-nav-item to="/navigation/pro/double-navigation-v2" waves-fixed icon="eye">
<span class="ml-1">v.2</span></mdb-nav-item>
<mdb-nav-item to="/navigation/pro/double-navigation-v3" waves-fixed icon="file-code" far>
<span class="ml-1">v.3</span></mdb-nav-item>
<mdb-nav-item to="/navigation/pro/double-navigation-v4" waves-fixed icon="terminal">
<span class="ml-1">v.4</span></mdb-nav-item>
<mdb-nav-item active to="/navigation/pro/double-navigation-v5" waves-fixed icon="smile" far>
<span class="ml-1">v.5</span></mdb-nav-item>
<mdb-nav-item to="/navigation/pro/double-navigation-v6" waves-fixed icon="user" far>
<span class="ml-1">v.6</span></mdb-nav-item>
</mdb-navbar-nav>
</mdb-navbar>
<div slot="main" style="height: 100vh">
<div class="view intro-2">
<div class="full-bg-img">
<div class="mask rgba-blue-grey-strong flex-center">
<div class="container">
<div class="white-text text-center">
<h2 class="font-weight-bold">
Double navigation v.5
</h2>
<hr />
<h3><strong>Navbar:</strong> <u>Fixed</u></h3>
<h3><strong>Sidenav:</strong> <u>Push</u></h3>
<mdb-btn rounded color="white" class="mt-5">
<router-link to="/navigation" class="dark-grey-text">Go back to the navigation menu
</router-link>
</mdb-btn>
</div>
</div>
</div>
</div>
</div>
</div>
</mdb-side-nav-2>
</div>
</template>
<script>
import {
mdbNavbar,
mdbNavItem,
mdbNavbarNav,
mdbSideNav2,
mdbAvatar,
mdbBtn,
mdbIcon
} from "mdbvue";
export default {
name: "DoubleNavigationPagev1",
components: {
mdbNavbar,
mdbNavItem,
mdbNavbarNav,
mdbSideNav2,
mdbAvatar,
mdbBtn,
mdbIcon
},
data() {
return {
show: true,
collapsed: false,
navigation: [{
name: "Double navigation",
icon: "bars",
children: [{
name: "Version 1",
to: "/navigation/pro/double-navigation-v1"
},
{
name: "Version 2",
to: "/navigation/pro/double-navigation-v2"
},
{
name: "Version 3",
to: "/navigation/pro/double-navigation-v3"
},
{
name: "Version 4",
to: "/navigation/pro/double-navigation-v4"
},
{
name: "Version 5",
to: "/navigation/pro/double-navigation-v5"
},
{
name: "Version 6",
to: "/navigation/pro/double-navigation-v6"
}
]
},
{
name: "Getting started",
icon: "mdb",
fab: true,
children: [{
name: "Quick start",
href: "https://mdbootstrap.com/docs/b4/vue/getting-started/quick-start/"
},
{
name: "Technical Support",
href: "https://mdbootstrap.com/support/"
}
]
},
{
name: "Documentation",
icon: "graduation-cap",
href: "https://mdbootstrap.com/docs/b4/vue/"
}
]
};
}
};
</script>
<style scoped>
.view {
background: url("https://mdbootstrap.com/img/Photos/Others/img (55).webp") no-repeat center center;
background-size: cover;
height: 100%;
}
.navbar i {
cursor: pointer;
color: white;
}
</style>
Push with Side Nav on the right
The option push adds the negative margin to the content - and the negative left
margin (which is set when the sidenav is on the right) in not scrollable. To address this issue, use
@setOffset method and increment the page's width and left padding:
<template>
<div ref="layout">
<mdb-side-nav-2 :data="[...]" right push @setOffset="setOffset">
</mdb-side-nav-2>
</div>
</template>
<script>
import {
mdbSideNav2
} from 'mdbvue';
export default {
components: {
mdbSideNav2
},
data() {
return {
width: null
}
},
mounted() {
this.width = this.$refs.layout.getBoundingClientRect().width;
},
methods: {
setOffset(value) {
if (!this.width) return;
this.$refs.layout.style.width = this.width + value + 'px';
this.$refs.layout.style.paddingLeft = value + 'px';
}
}
}
</script>
Over View demo
The simplest version - it opens over the content, by default covering it
with a backdrop - you can remove it by setting the
backdrop property to false
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum purus non convallis fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque commodo libero non nulla pretium elementum id quis dui. Donec pretium lorem vitae viverra molestie. Cras dictum nulla ac nibh tincidunt viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent molestie magna nec felis interdum, eget ullamcorper risus vehicula. Nulla faucibus, ligula dignissim tristique ornare, enim purus convallis lectus, a bibendum lectus erat sit amet ipsum. Aenean elementum malesuada leo, eget convallis magna faucibus vitae. Sed fermentum hendrerit mauris vitae ullamcorper. Maecenas interdum, orci vitae convallis convallis, nisi tortor fermentum erat, fringilla pharetra ipsum nunc eu urna. Praesent accumsan ligula vel ligula blandit porttitor. Curabitur sit amet est quis quam commodo lobortis. Mauris congue laoreet mollis. Ut congue velit elit, luctus ultrices libero luctus aliquam. Suspendisse consequat massa at ante eleifend, et finibus metus hendrerit. Fusce elit odio, vestibulum eu velit id, faucibus consectetur mi. Vivamus eget porttitor libero, eget tincidunt mi. Ut rutrum urna lorem, sit amet gravida nunc ultrices nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ligula mi, malesuada id suscipit ac, ornare nec elit. Suspendisse at augue in metus maximus laoreet. Vivamus egestas volutpat vestibulum. Mauris porttitor nisi eu turpis volutpat consectetur. Nunc ultricies nulla gravida, gravida lorem vitae, consequat velit. Nullam suscipit arcu eu lectus feugiat, at accumsan metus venenatis. Proin et tortor ex. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed in neque ut urna egestas commodo sit amet pulvinar orci. Nulla facilisi. Suspendisse ligula velit, tempor nec mollis nec, dignissim sit amet mi. Quisque sit amet nibh quam. Aliquam eu risus at magna tristique molestie a a eros. Praesent quis ornare libero, vitae molestie orci. Sed luctus sem a massa faucibus aliquet. Nam fermentum eros eget risus suscipit pharetra. Ut ac nisl ipsum. Nunc maximus urna nec ipsum pulvinar, ac ultricies magna sagittis. Sed semper odio turpis, sed sodales ante efficitur quis. Vivamus tincidunt, ipsum non tristique elementum, dolor eros vehicula leo, sit amet lobortis enim lectus ac dui. Vestibulum ut nisl nec nunc pharetra euismod at non odio. Donec vestibulum condimentum sagittis. Nunc quis tortor at libero maximus euismod. In non tortor consectetur, tristique lectus in, pulvinar metus. Vivamus interdum magna magna, id imperdiet tortor accumsan sed. Vestibulum vitae mauris ac lectus faucibus efficitur vitae quis ligula. Nam vel placerat turpis. Nam luctus suscipit pretium. Ut ut tristique tellus. Duis imperdiet condimentum accumsan. Nunc sodales ultrices dolor sed commodo. In quam arcu, maximus non enim quis, cursus feugiat erat. Etiam sollicitudin semper libero et dictum.
<template>
<div>
<mdb-navbar position="top" :toggler="false" color="white">
<mdb-navbar-nav left>
<mdb-icon icon="bars" class="dark-grey-text" size="2x" @click.native="show = !show" />
</mdb-navbar-nav>
<mdb-navbar-nav class="nav-flex-icons" right>
<mdb-nav-item to="/navigation/pro/double-navigation-v1" waves-fixed active icon="code-branch">
<span class="ml-1">v.1</span></mdb-nav-item>
<mdb-nav-item anchor-class="dark-grey-text" to="/navigation/pro/double-navigation-v2" waves-fixed
icon="eye"><span class="ml-1">v.2</span></mdb-nav-item>
<mdb-nav-item anchor-class="dark-grey-text" to="/navigation/pro/double-navigation-v3" waves-fixed
icon="file-code" far><span class="ml-1">v.3</span></mdb-nav-item>
<mdb-nav-item anchor-class="dark-grey-text" to="/navigation/pro/double-navigation-v4" waves-fixed
icon="terminal"><span class="ml-1">v.4</span></mdb-nav-item>
<mdb-nav-item anchor-class="dark-grey-text" to="/navigation/pro/double-navigation-v5" waves-fixed
icon="smile" far><span class="ml-1">v.5</span></mdb-nav-item>
<mdb-nav-item anchor-class="dark-grey-text" to="/navigation/pro/double-navigation-v6" waves-fixed
icon="user" far><span class="ml-1">v.6</span></mdb-nav-item>
</mdb-navbar-nav>
</mdb-navbar>
<!--/.Navbar-->
<mdb-side-nav-2 v-model="show" over :data="navigation" color="success">
<div slot="header">
<div class="p-5">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.webp" class="img-fluid" />
</div>
<hr />
<ul class="list-unstyled d-flex justify-content-center">
<li>
<a href="#" tabindex="0" class="px-3 icons-sm fb-ic">
<mdb-icon color="grey" fab icon="facebook-f" />
</a>
</li>
<li>
<a href="#" tabindex="0" class="px-3 icons-sm pin-ic">
<mdb-icon color="grey" fab icon="pinterest-p" />
</a>
</li>
<li>
<a href="#" tabindex="0" class="px-3 icons-sm gplus-ic">
<mdb-icon color="grey" fab icon="google-plus-g" />
</a>
</li>
<li>
<a href="#" tabindex="0" class="px-3 icons-sm tw-ic">
<mdb-icon color="grey" fab icon="twitter" />
</a>
</li>
</ul>
<hr />
</div>
</mdb-side-nav-2>
<div style="height: 100vh;">
<div class="view intro-2">
<div class="full-bg-img">
<div class="mask rgba-grey-strong flex-center">
<div class="container">
<div class="white-text text-center">
<h2 class="font-weight-bold">
Double navigation v.1
</h2>
<hr />
<h3><strong>Navbar:</strong> <u>Fixed</u></h3>
<h3><strong>Sidenav:</strong> <u>Over</u></h3>
<mdb-btn rounded color="white" class="mt-5">
<router-link to="/navigation" class="dark-grey-text">Go back to the navigation menu
</router-link>
</mdb-btn>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
mdbNavbar,
mdbNavItem,
mdbNavbarNav,
mdbSideNav2,
mdbBtn,
mdbIcon
} from "mdbvue";
export default {
components: {
mdbNavbar,
mdbNavItem,
mdbNavbarNav,
mdbSideNav2,
mdbBtn,
mdbIcon
},
data() {
return {
show: false,
navigation: [{
name: "Double navigation",
icon: "bars",
children: [{
name: "Version 1",
to: "/navigation/pro/double-navigation-v1"
},
{
name: "Version 2",
to: "/navigation/pro/double-navigation-v2"
},
{
name: "Version 3",
to: "/navigation/pro/double-navigation-v3"
},
{
name: "Version 4",
to: "/navigation/pro/double-navigation-v4"
},
{
name: "Version 5",
to: "/navigation/pro/double-navigation-v5"
},
{
name: "Version 6",
to: "/navigation/pro/double-navigation-v6"
}
]
},
{
name: "Getting started",
icon: "mdb",
fab: true,
children: [{
name: "Quick start",
href: "https://mdbootstrap.com/docs/b4/vue/getting-started/quick-start/"
},
{
name: "Technical Support",
href: "https://mdbootstrap.com/support/"
}
]
},
{
name: "Documentation",
icon: "graduation-cap",
href: "https://mdbootstrap.com/docs/b4/vue/"
}
]
};
}
};
</script>
<style scoped>
.view {
background: url("https://mdbootstrap.com/img/Photos/Others/img (52).webp") no-repeat center center;
background-size: cover;
height: 100%;
}
.navbar i {
cursor: pointer;
color: white;
}
</style>
Rendering content
Data structure
Pass to the data property an array of your links - each link
should be represented as object. You can learn more about available
options and grouping links into categories in the API tab.
<script>
const data = [{
name: "Double navigation",
icon: "bars",
children: [{
name: "Version 1",
to: "/navigation/pro/double-navigation-v1"
},
{
name: "Version 2",
to: "/navigation/pro/double-navigation-v2"
},
{
name: "Version 3",
to: "/navigation/pro/double-navigation-v3"
},
{
name: "Version 4",
to: "/navigation/pro/double-navigation-v4"
},
{
name: "Version 5",
to: "/navigation/pro/double-navigation-v5"
},
{
name: "Version 6",
to: "/navigation/pro/double-navigation-v6"
}
]
},
{
name: "Getting started",
icon: "mdb",
fab: true,
children: [{
name: "Quick start",
href: "https://mdbootstrap.com/docs/b4/vue/getting-started/quick-start/"
},
{
name: "Technical Support",
href: "https://mdbootstrap.com/support/"
}
]
},
{
name: "Documentation",
icon: "graduation-cap",
href: "https://mdbootstrap.com/docs/b4/vue/"
}
];
</script>
Headers
Use one of two custom slots to create a fully cutomized header for your side nav:
-
header - can be fixed on the top by setting
:fixed-header="true" - content-header - allways scrollable
<template>
<mdb-side-nav-2 :data="[...]">
<div slot="header">...</div>
<div slot="content-header">...</div>
</mdb-side-nav-2>
</template>
Content slot
You can use slot="content" to render your content - you don't need to use the data structures at all if you prefer more customized navigation:
<template>
<mdb-side-nav-2 :data="[...]">
<div slot="content">...</div>
</mdb-side-nav-2>
</template>
Examples
List of all the properties which you can use to customize your side nav can be found in the API tab.
Basic View demo (Basic example)
<template>
<mdb-side-nav-2 :data="navigation" v-model="show" over>
<div slot="header" class="d-flex flex-column align-items-center mt-4">
<img src="https://z9t4u9f6.stackpathcdn.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
class="img-fluid mb-3" />
<hr class="w-100" />
</div>
</mdb-side-nav-2>
</template>
<script>
import {
mdbSideNav2
} from "mdbvue";
export default {
components: {
mdbSideNav2
},
data() {
return {
show: false,
navigation: [{
name: "Home",
to: "/",
icon: "home"
},
{
name: "CSS",
to: "/css",
icon: "css3",
fab: true
},
{
name: "Components",
to: "/components",
icon: "cubes"
},
{
name: "Advanced",
to: "/advanced",
icon: "code"
},
{
name: "Navigation",
icon: "bars",
children: [{
name: "Footer",
to: "/navigation/pro/footer"
},
{
name: "Hamburger Menu",
to: "/navigation/pro/hamburger"
},
{
name: "Mega Menu",
to: "/navigation/pro/megamenu"
},
{
name: "Navbar",
to: "/navigation/pro/navbar"
},
{
name: "Sidenav",
to: "/navigation/pro/sidenav2"
}
]
},
{
name: "Forms",
to: "/forms",
icon: "edit"
},
{
name: "Tables",
to: "/tables",
icon: "table"
},
{
name: "Modals",
to: "/modals",
icon: "window-restore"
},
{
name: "Plugins",
to: "/plugins",
icon: "plus-square"
},
{
name: "Sections",
to: "/sections",
icon: "th-large"
},
{
name: "Mixins",
to: "/mixins",
icon: "user-cog"
},
{
name: "Directives",
to: "/directives",
icon: "asterisk"
}
]
};
}
};
</script>
Slim View demo (Slim)
The slim state can be controlled from outside by using
slim-collapsed property and @toggleSlim event.
<template>
<mdb-side-nav-2 :data="navigation" v-model="show" over :slim-collapsed="slimCollapsed" expand-on-hover slim
@toggleSlim="slimCollapsed = $event">
<div slot="header">
<div class="d-flex align-items-center my-4" :class="
slimCollapsed
? 'justify-content-center'
: 'justify-content-start'
">
<mdb-avatar :width="40" style="flex: 0 0 auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp"
class="img-fluid rounded-circle z-depth-1" />
</mdb-avatar>
<p class="m-t mb-0 ml-4 p-0" style="flex: 0 2 auto" v-show="!slimCollapsed">
<strong>Ann Smith
<mdb-icon color="success" icon="circle" class="ml-2" size="sm" /></strong>
</p>
</div>
<hr class="w-100" />
</div>
</mdb-side-nav-2>
</template>
<script>
import {
mdbSideNav2,
mdbIcon,
mdbAvatar
} from "mdbvue";
export default {
components: {
mdbIcon,
mdbAvatar,
mdbSideNav2
},
data() {
return {
show: false,
slimCollapsed: true,
navigation: [{
name: "Home",
to: "/",
icon: "home"
},
{
name: "CSS",
to: "/css",
icon: "css3",
fab: true
},
{
name: "Components",
to: "/components",
icon: "cubes"
},
{
name: "Advanced",
to: "/advanced",
icon: "code"
},
{
name: "Navigation",
icon: "bars",
children: [{
name: "Footer",
to: "/navigation/pro/footer"
},
{
name: "Hamburger Menu",
to: "/navigation/pro/hamburger"
},
{
name: "Mega Menu",
to: "/navigation/pro/megamenu"
},
{
name: "Navbar",
to: "/navigation/pro/navbar"
},
{
name: "Sidenav",
to: "/navigation/pro/sidenav2"
}
]
},
{
name: "Forms",
to: "/forms",
icon: "edit"
},
{
name: "Tables",
to: "/tables",
icon: "table"
},
{
name: "Modals",
to: "/modals",
icon: "window-restore"
},
{
name: "Plugins",
to: "/plugins",
icon: "plus-square"
},
{
name: "Sections",
to: "/sections",
icon: "th-large"
},
{
name: "Mixins",
to: "/mixins",
icon: "user-cog"
},
{
name: "Directives",
to: "/directives",
icon: "asterisk"
}
]
};
}
};
</script>
Group View demo (Group links)
Group your naviagtion into categories by adding the
group property:
<template>
<mdb-side-nav-2 :data="groupsContent" v-model="show" over groups fixed-header color="secondary">
<div slot="header" class="mt-3 grey-text">
<mdb-avatar :width="48" class="ml-3">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.webp"
class="img-fluid rounded-circle z-depth-1" />
</mdb-avatar>
<h5 class="mt-4 ml-3"><strong>Ann Smith</strong></h5>
<p class="ml-3">ann12345@mdbootstrap.com</p>
<hr class="mb-0" />
</div>
</mdb-side-nav-2>
</template>
<script>
import {
mdbSideNav2,
mdbAvatar
} from "mdbvue";
export default {
components: {
mdbAvatar,
mdbSideNav2
},
data() {
return {
show: false,
groupsContent: [{
data: [{
name: "Inbox",
to: "/",
icon: "envelope"
},
{
name: "Outbox",
to: "/",
icon: "paper-plane"
},
{
name: "Favorites",
to: "/",
icon: "heart"
},
{
name: "Starred",
icon: "star"
}
]
},
{
data: [{
name: "Recent",
to: "/",
icon: "clock"
},
{
name: "Uploads",
to: "/",
icon: "upload"
},
{
name: "Backups",
to: "/",
icon: "cloud-upload-alt"
},
{
name: "Trash",
icon: "trash"
}
]
},
{
name: "Settings",
data: [{
name: "Account",
to: "/",
icon: "user"
},
{
name: "Privacy",
to: "/",
icon: "lock"
}
]
},
{
data: [{
name: "Log out",
to: "/"
}]
}
]
};
}
};
</script>
Right View demo (Dark mode)
You can position your side nav on the right side as well - simple set
right property to true
<template>
<mdb-side-nav-2 :data="navigation" v-model="show" color="white" right over expand-on-hover
:sidenav-class="['mdb-color', 'darken-4']" slim>
<div slot="header" class="d-flex flex-column align-items-center mt-4">
<img src="https://z9t4u9f6.stackpathcdn.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
class="img-fluid mb-3" />
<hr class="w-100" />
</div>
</mdb-side-nav-2>
</template>
<script>
import {
mdbSideNav2
} from "mdbvue";
export default {
components: {
mdbSideNav2
},
data() {
return {
show: false,
navigation: [{
name: "Home",
to: "/",
icon: "home"
},
{
name: "CSS",
to: "/css",
icon: "css3",
fab: true
},
{
name: "Components",
to: "/components",
icon: "cubes"
},
{
name: "Advanced",
to: "/advanced",
icon: "code"
},
{
name: "Navigation",
icon: "bars",
children: [{
name: "Footer",
to: "/navigation/pro/footer"
},
{
name: "Hamburger Menu",
to: "/navigation/pro/hamburger"
},
{
name: "Mega Menu",
to: "/navigation/pro/megamenu"
},
{
name: "Navbar",
to: "/navigation/pro/navbar"
},
{
name: "Sidenav",
to: "/navigation/pro/sidenav2"
}
]
},
{
name: "Forms",
to: "/forms",
icon: "edit"
},
{
name: "Tables",
to: "/tables",
icon: "table"
},
{
name: "Modals",
to: "/modals",
icon: "window-restore"
},
{
name: "Plugins",
to: "/plugins",
icon: "plus-square"
},
{
name: "Sections",
to: "/sections",
icon: "th-large"
},
{
name: "Mixins",
to: "/mixins",
icon: "user-cog"
},
{
name: "Directives",
to: "/directives",
icon: "asterisk"
}
]
};
}
};
</script>
Custom content View demo (Custom slim with tooltips)
Create entirely custom side navigation, by placing your navigation inaide content slot instead of the default data object.
<template>
<mdb-side-nav-2 v-model="show" color="white" over :sidenav-class="['unique-color-dark', 'darken-4']"
:slim-width="80" slim>
<ul slot="content" class="custom-content list-unstyled mt-5 d-flex flex-column align-items-center">
<li :class="{ active: i === active }" v-for="(item, i) in custom" :key="i">
<mdb-tooltip v-if="show6" append-to-body trigger="hover" :options="{
placement: 'right',
modifiers: {
preventOverflow: {
enabled: false
},
hide: {
enabled: false
},
offset: {
offset: '0,20'
}
}
}">
<mdb-btn slot="reference" @click="active = i"
:icon-class="active === i ? 'white-text fa-2x' : 'fa-2x'" flat :icon="item.icon"
class="px-3 py-4 m-0" />
<span slot="tip" class="p-2 my-2"
>{{ item.text }}</span></mdb-tooltip>
</li>
</ul>
</mdb-side-nav-2>
</template>
<script>
import {
mdbSideNav2,
mdbBtn,
mdbTooltip
} from "mdbvue";
export default {
components: {
mdbBtn,
mdbTooltip,
mdbSideNav2
},
data() {
return {
show: false,
active: 0,
custom: [{
icon: "share-alt",
text: "Share"
},
{
icon: "heart",
text: "Favourites"
},
{
icon: "address-book",
text: "Contacts"
},
{
icon: "envelope",
text: "Send a message"
},
{
icon: "sliders-h",
text: "Settings"
}
]
};
}
};
</script>
<style scoped>
.custom-content {
width: 100%;
}
.custom-content li {
width: 100%;
}
.custom-content li button {
transition: all 0.3s ease-in;
width: 100%;
}
.custom-content li button:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.custom-content li button:focus {
outline: none !important;
background-color: rgba(255, 255, 255, 0.05);
}
.custom-content .active {
background-color: rgba(255, 255, 255, 0.1);
}
</style>
Data from API View demo (Data from API)
<template>
<mdb-side-nav-2 v-model="show" color="white" over :sidenav-class="['special-color']" :data="content"
@itemClick="selectItem">
<div slot="header" class="mb-2 rgba-white-slight sidenav-content">
<h4>Chat</h4>
</div>
<div slot="content" class="rgba-white-slight sidenav-content text-center">
<div v-if="selected">
<p>Selected user:</p>
<p>
<strong><u>{{ selected }}</u></strong>
<mdb-icon class="ml-2" far icon="envelope" />
</p>
<p>({{ this.status.toLowerCase() }})</p>
</div>
<p v-else>User not selected</p>
</div>
</mdb-side-nav-2>
</template>
<script>
import axios from "axios";
import {
mdbSideNav2,
mdbIcon
} from "mdbvue";
export default {
components: {
mdbIcon,
mdbSideNav2
},
data() {
return {
show: false,
content: [{
name: "Online",
children: [],
icon: 'circle'
},
{
name: "Offline",
children: [],
icon: 'circle',
far: true
}
],
selected: null,
status: ''
};
},
mounted() {
axios.get("https://jsonplaceholder.typicode.com/users").then(response => {
const [online, offline] = this.content;
response.data.forEach(user => {
const isActive = Math.random() < 0.5;
const group = isActive ? online : offline;
group.children.push({
name: user.name
})
});
});
},
methods: {
selectItem(category, item) {
if (!item) {
this.status = this.content[category].name;
} else {
this.selected = this.content[category].children[item].name;
}
}
}
};
</script>
<style scoped>
.sidenav-content {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 5px;
}
</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
<script>
import {
mdbSideNav2
} from 'mdbvue';
</script>
API Reference: Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
value |
Boolean | false |
Opens / closes side navigation |
<mdb-side-nav-2 :value="true" ... />
|
data
|
Array | [] |
Renders the navigation links - see the required structure below |
<mdb-side-nav-2 :data="[{ ... }, { ... }]" />
|
over |
Boolean | false |
Changes the sidenav position to over |
<mdb-side-nav-2 over ... />
|
push |
Boolean | false |
Makes the sidenav push the content out of its way |
<mdb-side-nav-2 push ... />
|
right
|
Boolean | false |
Moves the side nav to the right |
<mdb-side-nav-2 right ... />
|
duration |
Number | 300 |
Sets the duration of animations (in miliseconds) |
<mdb-side-nav-2 :duration="200" ... />
|
backdrop |
Boolean | true |
Allows to add/remove a backdrop do the navigation with property
over
|
<mdb-side-nav-2 :backdrop="false" ... />
|
backdropClass |
String, Array | "rgba-black-light" |
Allows to customize a backdrop |
<mdb-side-nav-2 backdrop-class="rgba-pink-strong" ...
/>
|
slim |
Boolean | false |
Changes the side nav style to slim |
<mdb-side-nav-2 slim />
|
slimCollapsed |
Boolean | true |
Determines if the slim sidenav is collapsed to the narrow state |
<mdb-side-nav-2 slim slim-collapsed="slimCollapsed" ...
/>
|
expandOnHover |
Boolean | false |
Allows to expand a slim side nav to wide version on a mouseover event |
<mdb-side-nav-2 slim expand-on-hover ... />
|
slimWidth |
Number | 60 |
Changes the width of the slim sidenav |
<mdb-side-nav-2 slim :slim-width="100" ... />
|
width |
Number | 240 |
Changes the default width of the sidenav |
<mdb-side-nav-2 :width="360" ... />
|
fixedHeader |
Boolean | false |
Allows to make the content of the header slot fixed on
top
|
<mdb-side-nav-2 fixed-header ... />
|
color |
String | "primary" |
Changes the color of active items (see list of available colors below) |
<mdb-side-nav-2 color="success" ... />
|
sidenavClass |
String, Array | [] |
Adds a custom class to the side navigation |
<mdb-side-nav-2 sidenav-class="danger-color" ... />
|
groups |
Boolean | false |
Allows to render the content in groups |
<mdb-side-nav-2 groups :data="[]" ... />
|
API Reference: Data structure
The data property supports nesting links one level deep - if
you need to create more complicated structures, use
content slot instead.
const data = [{
name: String,
to: String(use
for router - links),
href: String(use
for simple anchor tags),
icon: String,
fab: Boolean,
far: Boolean,
fal: Boolean,
fad: Boolean,
children: [{
name: String,
to: String,
href: String
}]
}]
const data = [{
name: String - group name,
data: [{
name: String,
to: String(use
for router - links),
href: String(use
for simple anchor tags),
icon: String,
fab: Boolean,
far: Boolean,
fal: Boolean,
fad: Boolean,
children: [{
name: String,
to: String,
href: String
}]
}]
}]
API Reference: Colors
- primary
- danger
- warning
- succsess
- info
- default
- secondary
- elegant
- stylish
- unique
- special
- white
API Reference: Methods
| Name | Parameters | Description | Example |
|---|---|---|---|
@input
|
value | Emits the value and allows to use two way data binding |
<mdb-side-nav-2 v-model="show" />
|
@itemClick
|
index of link / category, index of the child (if the event was emitted by it) | Allows to call a method when the navigation's item is clicked |
<mdb-side-nav-2 @itemClick="handleItemClick" />
|
@toggleSlim
|
Boolean (true - sidenav collapsed, false - expanded) | Allows to control the slim sidenav behaviours from outside |
<mdb-side-nav-2 :slimCollapsed="value" @toggleSlim="value =
$event" />
|
@setOffset
|
Offset (Number in px) | Allows to create customized behaviour and set additional offsets to the page's elements as the sidenav is being toggled |
<mdb-side-nav-2 @setOffset="setOffset" />
|
API Reference: Slots
| Name | Description |
|---|---|
header
|
<mdb-side-nav-2> <div slot="header">...</div>
</mdb-side-nav-2>
|
content-header
|
<mdb-side-nav-2> <div
slot="content-header">...</div>
</mdb-side-nav-2>
|
content
|
<mdb-side-nav-2> <div slot="content">...</div>
</mdb-side-nav-2>
|
nav
|
<mdb-side-nav-2> <div slot="nav">...</div>
</mdb-side-nav-2>
|
main
|
<mdb-side-nav-2> <div slot="main">...</div>
</mdb-side-nav-2>
|
footer
|
<mdb-side-nav-2> <div slot="footer">...</div>
</mdb-side-nav-2>
|