Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, ornare quis
interdum a, cursus in quam. Quisque risus libero, cursus eget eros vitae, aliquam placerat
velit. Vivamus luctus eros id sagittis luctus. Pellentesque felis nulla, rhoncus viverra
nunc vitae, viverra aliquam ante. Ut feugiat mattis tempor.
Sidenav
Vue Bootstrap 5 Sidenav component
The side navigation component provides an easy way to navigate through your website. Its appearance & behaviour are easily adjustable with data-mdb-attributes and methods - additional functionality such as touch events and focus trap (in an over mode) are available out of the box.
Note: Read the API tab to find all available options and advanced customization
Basic example
In the basic version, the side navigation will appear over your website's content after clicking on a toggler.
Note: Use v-model property on MDBSideNav to toggle navigation.
<template>
<!-- Sidenav-->
<MDBSideNav v-model="sidenav1" id="sidenav1">
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 1</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin" title="Category 1">
<MDBSideNavItem>
<MDBSideNavLink>Link 2</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 3</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin-wink" title="Category 2">
<MDBSideNavItem>
<MDBSideNavLink>Link 4</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 5</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
</MDBSideNavMenu>
</MDBSideNav>
<!-- Sidenav-->
<!-- Toggler -->
<div class="text-center">
<MDBBtn
color="primary"
aria-controls="#sidenav1"
@click="sidenav1 = !sidenav1"
>
<MDBIcon icon="bars" />
</MDBBtn>
</div>
<!-- Toggler -->
</template>
<script>
import { MDBSideNav, MDBSideNavMenu, MDBSideNavItem, MDBSideNavLink, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
import { ref } from 'vue';
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBBtn,
MDBIcon
},
setup() {
const sidenav1 = ref(true);
return {
sidenav1
}
}
};
</script>
Positioning
While using the mode="side" and mode="push" properties, you can
specify the contentSelector property for your page's content - this way, the
component will automatically update paddings and margins.
Select mode:
<template>
<div class="d-flex my-4">
<MDBBtn
@click="setMode('push')"
:class="{
btn: true,
'btn-outline-primary': !mode === 'push',
'btn-primary': mode === 'push',
'me-3': true
}"
>Push</MDBBtn
>
<MDBBtn
@click="setMode('side')"
:class="{
btn: true,
'btn-outline-primary': !mode === 'side',
'btn-primary': mode === 'side',
'me-3': true
}"
>Side</MDBBtn
>
<MDBBtn
@click="setMode('over')"
:class="{
btn: true,
'btn-outline-primary': !mode === 'over',
'btn-primary': mode === 'over',
'me-3': true
}"
>Over</MDBBtn
>
</div>
<section
style="position: relative; overflow-y: hidden; min-height: 400px"
class="border p-4 d-flex justify-content-center mb-4"
>
<!-- Sidenav-->
<MDBSideNav
v-model="sidenavPositions"
id="sidenavPositions"
absolute
:mode="mode"
contentSelector="#content"
>
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 1</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin" title="Category 1" show>
<MDBSideNavItem>
<MDBSideNavLink>Link 2</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 3</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin-wink" title="Category 2" show>
<MDBSideNavItem>
<MDBSideNavLink>Link 4</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 5</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
</MDBSideNavMenu>
</MDBSideNav>
<!-- Sidenav-->
<!-- Content -->
<div style="padding: 20px" class="text-center" id="content">
<!-- Toggler -->
<MDBBtn
color="primary"
aria-controls="#sidenavPositions"
@click="sidenavPositions = !sidenavPositions"
>
<MDBIcon icon="bars" />
</MDBBtn>
<!-- Toggler -->
<div class="d-flex my-5 text-start">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
magna massa, ornare quis interdum a, cursus in quam. Quisque risus
libero, cursus eget eros vitae, aliquam placerat velit. Vivamus
luctus eros id sagittis luctus. Pellentesque felis nulla, rhoncus
viverra nunc vitae, viverra aliquam ante. Ut feugiat mattis
tempor.
</div>
</div>
<!-- Content -->
</section>
</template>
<script>
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBBtn,
MDBIcon
} from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBBtn,
MDBIcon
},
setup() {
const sidenavPositions = ref(true);
const mode = ref("over");
const setMode = value => {
mode.value = value;
};
return {
sidenavPositions,
mode,
setMode
};
}
};
</script>
Colors example
Setting the color property will change the background and font color of
active/hovered links and categories.
Note: This option works for MDB 5 main colors - primary, secondary, warning, danger, success, info, dark and light.
Select color:
<template>
<!-- Sidenav-->
<MDBSideNav
v-model="sidenavColors"
id="sidenavColors"
:color="sidenavColor"
contentSelector="#content"
mode="side"
closeOnEsc
>
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 1</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin" title="Category 1" show>
<MDBSideNavItem>
<MDBSideNavLink>Link 2</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 3</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin-wink" title="Category 2" show>
<MDBSideNavItem>
<MDBSideNavLink>Link 4</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 5</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
</MDBSideNavMenu>
</MDBSideNav>
<!-- Sidenav-->
<!-- Content -->
<div class="my-3" id="content">
<MDBBtn id="sidenav-primary" color="primary" v-on:click="setSidenavColor"
>Primary</MDBBtn
>
<MDBBtn id="sidenav-secondary" color="secondary" v-on:click="setSidenavColor">
Secondary
</MDBBtn>
<MDBBtn id="sidenav-warning" color="warning" v-on:click="setSidenavColor"
>Warning</MDBBtn
>
<MDBBtn id="sidenav-danger" color="danger" v-on:click="setSidenavColor"
>Danger</MDBBtn
>
<MDBBtn id="sidenav-success" color="success" v-on:click="setSidenavColor"
>Success</MDBBtn
>
<MDBBtn id="sidenav-info" color="info" v-on:click="setSidenavColor"
>Info</MDBBtn
>
<MDBBtn id="sidenav-dark" color="dark" v-on:click="setSidenavColor"
>Dark</MDBBtn
>
<MDBBtn id="sidenav-light" color="light" v-on:click="setSidenavColor"
>Light</MDBBtn
>
</div>
<!-- Content -->
<!-- Toggler-->
<div style="padding: 20px" class="text-center">
<MDBBtn
color="primary"
aria-controls="#sidenavColors"
v-on:click="sidenavColors = !sidenavColors"
>
<MDBIcon icon="bars" />
</MDBBtn>
</div>
<!-- Toggler-->
</template>
<script>
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBBtn,
MDBIcon
} from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBBtn,
MDBIcon
},
setup() {
const sidenavColors = ref(true);
const sidenavColor = ref("primary");
const setSidenavColor = e => {
sidenavColor.value = e.target.id.split("-")[1];
};
return {
sidenavColors,
sidenavColor,
setSidenavColor
};
}
};
</script>
Dark example
When using the dark property to set darker background for the navigation, we
recommend setting the color property to "light" for better contrast.
<template>
<!-- Sidenav-->
<MDBSideNav
v-model="sidenavDark"
id="sidenavDark"
color="light"
dark
>
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 1</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin" title="Category 1" show>
<MDBSideNavItem>
<MDBSideNavLink>Link 2</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 3</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin-wink" title="Category 2" show>
<MDBSideNavItem>
<MDBSideNavLink>Link 4</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 5</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
</MDBSideNavMenu>
</MDBSideNav>
<!-- Sidenav-->
<!-- Toggler-->
<div style="padding: 20px" class="text-center">
<MDBBtn
color="primary"
aria-controls="#sidenavDark"
@click="sidenavDark = !sidenavDark"
>
<MDBIcon icon="bars" />
</MDBBtn>
</div>
<!-- Toggler-->
</template>
<script>
import { MDBSideNav, MDBSideNavMenu, MDBSideNavItem, MDBSideNavLink, MDBIcon, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from 'vue';
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
},
setup() {
const sidenavDark = ref(true);
return {
sidenavDark
}
}
};
</script>
Inner scroll
Passing a scrollContainer property to a MDBSideNavMenu will
initialize MDBScrollbar on this element (by default it's initialized on the
MDBSideNav).
<template>
<!-- Sidenav-->
<MDBSideNav v-model="sidenavScroll" id="sidenavScroll">
<div class="text-center">
<h3 class="py-4">Examples</h3>
<hr class="m-0" />
</div>
<MDBSideNavMenu scrollContainer>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 1</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 2</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 3</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 4</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 5</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 6</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 7</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 8</span>
</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavMenu>
<div class="text-center" style="min-height: 3rem">
<hr class="mt-0 mb-2" />
<small>mdbootstrap.com</small>
</div>
</MDBSideNav>
<!-- Sidenav-->
<!-- Toggler-->
<div style="padding: 20px" class="text-center">
<MDBBtn
color="primary"
aria-controls="#sidenavScroll"
@click="sidenavScroll = !sidenavScroll"
>
<MDBIcon icon="bars" />
</MDBBtn>
</div>
<!-- Toggler-->
</template>
<script>
import { MDBSideNav, MDBSideNavMenu, MDBSideNavItem, MDBSideNavLink, MDBIcon, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from 'vue';
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
},
setup() {
const sidenavScroll = ref(true);
return {
sidenavScroll
}
}
};
</script>
Slim example
Use slim and slimColapsed properties to manage slim mode for the
MDBSideNav component. You can hide elements in the slim mode by setting
sidenav-non-slim class on them or by adding nonSlim property if youo
want to hide the title of collapsible MDBSideNavItem. Elements without this
attribute will appear in both collapsed and non collapsed mode.
<template>
<!-- Sidenav-->
<MDBSideNav
v-model="sidenavSlim"
:slim="slim1"
:slimCollapsed="!slimShow1 && !slimShow2"
:backdrop="false"
id="sidenavSlim"
>
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span class="sidenav-non-slim">Link 1</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem
collapse
icon="grin"
title="Category 1"
nonSlim
:show="slimShow1"
@click="slimShow1 = !slimShow1"
>
<MDBSideNavItem>
<MDBSideNavLink>Link 2</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 3</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem
collapse
icon="grin-wink"
title="Category 2"
nonSlim
:show="slimShow2"
@click="slimShow2 = !slimShow2"
>
<MDBSideNavItem>
<MDBSideNavLink>Link 4</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 5</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
</MDBSideNavMenu>
</MDBSideNav>
<!-- Sidenav-->
<!-- Toggler-->
<div class="text-center">
<MDBBtn
color="primary"
aria-controls="#sidenavSlim"
@click="sidenavSlim = !sidenavSlim"
>
<MDBIcon icon="bars" />
</MDBBtn>
<MDBBtn
color="primary"
aria-controls="#sidenavSlim"
@click="
() => {
if (!slim1) {
slimShow1 = false;
slimShow2 = false;
}
slim1 = !slim1;
}
"
>
Toggle slim
</MDBBtn>
</div>
<!-- Toggler-->
</template>
<script>
import { MDBSideNav, MDBSideNavMenu, MDBSideNavItem, MDBSideNavLink, MDBIcon, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from 'vue';
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
},
setup() {
const slim1 = ref(true);
const sidenavSlim = ref(true);
const slimShow1 = ref(false);
const slimShow2 = ref(false);
return {
slim1,
sidenavSlim,
slimShow1,
slimShow2
}
}
};
</script>
Accordion example
Using accordion property on MDBSideNavMenu will allow expanding only
one category at once.
<template>
<!-- Sidenav-->
<MDBSideNav v-model="sidenavAccordion" id="sidenavAccordion">
<MDBSideNavMenu accordion>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 1</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin" title="Category 1">
<MDBSideNavItem>
<MDBSideNavLink>Link 2</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 3</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin-wink" title="Category 2">
<MDBSideNavItem>
<MDBSideNavLink>Link 4</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 5</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
</MDBSideNavMenu>
</MDBSideNav>
<!-- Sidenav-->
<!-- Toggler-->
<div style="padding: 20px" class="text-center">
<MDBBtn
color="primary"
aria-controls="#sidenavAccordion"
@click="sidenavAccordion = !sidenavAccordion"
>
<MDBIcon icon="bars" />
</MDBBtn>
</div>
<!-- Toggler-->
</template>
<script>
import { MDBSideNav, MDBSideNavMenu, MDBSideNavItem, MDBSideNavLink, MDBIcon, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from 'vue';
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
},
setup() {
const sidenavAccordion = ref(true);
return {
sidenavAccordion
}
}
};
</script>
Groups
You can use more than one menu inside the side navigation - in this case, accordions will be independent of one another.
<template>
<!-- Sidenav-->
<MDBSideNav v-model="sidenavGroups" id="sidenavGroups">
<MDBSideNavMenu accordion>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 1</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin" title="Category 1">
<MDBSideNavItem>
<MDBSideNavLink>Link 2</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 3</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin-wink" title="Category 2">
<MDBSideNavItem>
<MDBSideNavLink>Link 4</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 5</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
</MDBSideNavMenu>
<hr />
<MDBSideNavMenu accordion>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 6</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin" title="Category 3">
<MDBSideNavItem>
<MDBSideNavLink>Link 7</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 8</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin-wink" title="Category 4">
<MDBSideNavItem>
<MDBSideNavLink>Link 9</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 10</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
</MDBSideNavMenu>
</MDBSideNav>
<!-- Sidenav-->
<!-- Toggler-->
<div style="padding: 20px" class="text-center">
<MDBBtn
color="primary"
aria-controls="#sidenavGroups"
@click="sidenavGroups = !sidenavGroups"
>
<MDBIcon icon="bars" />
</MDBBtn>
</div>
<!-- Toggler-->
</template>
<script>
import { MDBSideNav, MDBSideNavMenu, MDBSideNavItem, MDBSideNavLink, MDBIcon, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from 'vue';
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
},
setup() {
const sidenavGroups = ref(true);
return {
sidenavGroups
}
}
};
</script>
Right
Place the navigation on the other side by setting the
right property on MDBSideNav.
<template>
<!-- Sidenav-->
<MDBSideNav v-model="sidenavRight" right id="sidenavRight">
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon iconStyle="far" icon="smile" class="fa-fw me-3" />
<span>Link 1</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin" title="Category 1" show>
<MDBSideNavItem>
<MDBSideNavLink>Link 2</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 3</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="grin-wink" title="Category 2" show>
<MDBSideNavItem>
<MDBSideNavLink>Link 4</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Link 5</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
</MDBSideNavMenu>
</MDBSideNav>
<!-- Sidenav-->
<!-- Toggler-->
<div class="text-center">
<MDBBtn
color="primary"
aria-controls="#sidenavRight"
@click="sidenavRight = !sidenavRight"
>
<MDBIcon icon="bars" />
</MDBBtn>
</div>
<!-- Toggler-->
</template>
<script>
import { MDBSideNav, MDBSideNavMenu, MDBSideNavItem, MDBSideNavLink, MDBIcon, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from 'vue';
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
},
setup() {
const sidenavRight = ref(true);
return {
sidenavRight,
}
}
};
</script>
Full-screen examples
The following examples show various settings of the side navigation component in a full-screen mode.
1. Basic side navigation
Click the toggler to show the navigation (over mode).
<template>
<!-- Sidenav-->
<MDBSideNav
v-model="sidenavBasic"
id="sidenavBasic"
contentSelector="#page-content"
:closeOnEsc="true"
:backdrop="false"
>
<div class="mt-4">
<div id="header-content" class="ps-3">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(23).jpg"
alt="avatar"
class="rounded-circle img-fluid mb-3"
style="max-width: 50px;"
/>
<h4>
<span style="white-space: nowrap;">Ann Smith</span>
</h4>
<p>ann_s@mdbootstrap.com</p>
</div>
<hr class="mb-0" />
</div>
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink href="/">
<MDBIcon icon="envelope" class="fas fa-fw me-3"></MDBIcon
>Inbox</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="paper-plane" class="fas fa-fw me-3"></MDBIcon
>Outbox</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem collapse title="Contacts" icon="address-book">
<MDBSideNavItem>
<MDBSideNavLink>Family</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink href="/previews/mdb-ui-kit/sidenav/2.html"
>Friends</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Work</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="file" class="fas fa-fw me-3"></MDBIcon
>Drafts</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="heart" class="fas fa-fw me-3"></MDBIcon
>Favourites</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="star" class="fas fa-fw me-3"></MDBIcon
>Starred</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="trash" class="fas fa-fw me-3"></MDBIcon
>Trash</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="ban" class="fas fa-fw me-3"></MDBIcon
>Spam</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem collapse title="Categories" icon="tag" show>
<MDBSideNavItem>
<MDBSideNavLink>Social</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Notifications</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Recent</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Uploads</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Backups</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Offers</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="sticky-note" class="fas fa-fw me-3"></MDBIcon
>Notes</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user-circle" class="fas fa-fw me-3"></MDBIcon
>Personal</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="ellipsis-h" class="fas fa-fw me-3"></MDBIcon
>More</MDBSideNavLink
>
</MDBSideNavItem>
</MDBSideNavMenu>
<hr class="m-0" />
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="cogs" class="fas fa-fw me-3"></MDBIcon
>Settings</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user" class="fas fa-fw me-3"></MDBIcon
>Profile</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="shield-alt" class="fas fa-fw me-3"></MDBIcon
>Privacy</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user-astronaut" class="fas fa-fw me-3"></MDBIcon>Log
out</MDBSideNavLink
>
</MDBSideNavItem>
</MDBSideNavMenu>
<div class="text-center" style="height: 100px;">
<hr class="mb-4 mt-0" />
<p>MDBootstrap.com</p>
</div>
</MDBSideNav>
<div class="text-center page-intro bg-light" id="page-content">
<div class="text-center py-5">
<MDBBtn
color="primary"
aria-controls="#sidenavBasic"
@click="sidenavBasic = !sidenavBasic"
class="m-5"
>
<MDBIcon icon="bars" />
</MDBBtn>
<div>
<img
class="rounded"
style="max-width: 80%"
src="https://mdbootstrap.com/img/Photos/Others/img%20(45).jpg"
/>
</div>
</div>
</div>
</template>
<script>
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
},
setup() {
const sidenavBasic = ref(true);
return {
sidenavBasic
};
}
};
</script>
<style>
.page-intro {
background-size: cover;
background-position-x: center;
background-color: white;
width: 100vw;
height: 100vh;
}
</style>
2. Side navigation with a mode transition
Resize the window to change the mode from side to over.
<template>
<!-- Sidenav-->
<MDBSideNav
v-model="sidenavMode"
id="sidenavMode"
:modeBreakpoint="900"
:side="side"
:over="over"
contentSelector="#page-content"
:closeOnEsc="true"
>
<div class="mt-4">
<div id="header-content" class="ps-3">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(23).jpg"
alt="avatar"
class="rounded-circle img-fluid mb-3"
style="max-width: 50px;"
/>
<h4>
<span style="white-space: nowrap;">Ann Smith</span>
</h4>
<p>ann_s@mdbootstrap.com</p>
</div>
<hr class="mb-0" />
</div>
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink href="/">
<MDBIcon icon="envelope" class="fas fa-fw me-3"></MDBIcon
>Inbox</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="paper-plane" class="fas fa-fw me-3"></MDBIcon
>Outbox</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="address-book" title="Contacts">
<MDBSideNavItem>
<MDBSideNavLink>Family</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink href="/previews/mdb-ui-kit/sidenav/2.html"
>Friends</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Work</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="file" class="fas fa-fw me-3"></MDBIcon
>Drafts</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="heart" class="fas fa-fw me-3"></MDBIcon
>Favourites</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="star" class="fas fa-fw me-3"></MDBIcon
>Starred</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="trash" class="fas fa-fw me-3"></MDBIcon
>Trash</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="ban" class="fas fa-fw me-3"></MDBIcon
>Spam</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="tag" title="Categories">
<MDBSideNavItem>
<MDBSideNavLink>Social</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Notifications</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Recent</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Uploads</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Backups</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Offers</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="sticky-note" class="fas fa-fw me-3"></MDBIcon
>Notes</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user-circle" class="fas fa-fw me-3"></MDBIcon
>Personal</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="ellipsis-h" class="fas fa-fw me-3"></MDBIcon
>More</MDBSideNavLink
>
</MDBSideNavItem>
</MDBSideNavMenu>
<hr class="m-0" />
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="cogs" class="fas fa-fw me-3"></MDBIcon
>Settings</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user" class="fas fa-fw me-3"></MDBIcon
>Profile</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="shield-alt" class="fas fa-fw me-3"></MDBIcon
>Privacy</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user-astronaut" class="fas fa-fw me-3"></MDBIcon>Log
out</MDBSideNavLink
>
</MDBSideNavItem>
</MDBSideNavMenu>
<div class="text-center" style="height: 100px;">
<hr class="mb-4 mt-0" />
<p>MDBootstrap.com</p>
</div>
</MDBSideNav>
<!-- Sidenav-->
<!-- Content-->
<div class="text-center page-intro bg-light" id="page-content">
<div class="text-center py-5">
<h3 class="my-5">Resize to change the mode</h3>
<div>
<img
class="rounded"
style="max-width: 80%"
src="https://mdbootstrap.com/img/Photos/Others/img%20(53).jpg"
/>
</div>
<!-- Toggler-->
<MDBBtn
color="primary"
aria-controls="#sidenavMode"
@click="sidenavMode = !sidenavMode"
>
<MDBIcon icon="bars" />
</MDBBtn>
<!-- Toggler-->
</div>
</div>
<!-- Content-->
</template>
<script>
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
},
setup() {
const sidenavMode = ref(true);
const side = ref(true);
const over = ref(false);
return {
sidenavMode,
side,
over
};
}
};
</script>
<style>
.page-intro {
background-size: cover;
background-position-x: center;
background-color: white;
width: 100vw;
height: 100vh;
}
</style>
3. Slim side navigation (dark)
Non-expandable slim sidenav with a dark background and custom width.
<template>
<!-- Sidenav-->
<MDBSideNav
v-model="sidenavSlimDark"
id="sidenavSlimDark"
contentSelector="#page-content"
:slim="true"
:slimCollapsed="true"
:slimWidth="90"
color="light"
dark
>
<div class="text-center mt-4">
<a class="ripple rounded-circle" data-mdb-color="light" href="#">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg"
alt="avatar"
class="rounded-circle img-fluid"
style="max-width: 60px;"
/>
</a>
</div>
<hr />
<MDBSideNavMenu>
<MDBSideNavItem class="my-3">
<MDBSideNavLink class="p-0 d-flex justify-content-center">
<MDBIcon iconStyle="far" icon="heart" size="2x"></MDBIcon
></MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem class="my-3">
<MDBSideNavLink class="p-0 d-flex justify-content-center">
<MDBIcon iconStyle="far" icon="envelope" size="2x"></MDBIcon
></MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem class="my-3">
<MDBSideNavLink class="p-0 d-flex justify-content-center">
<MDBIcon iconStyle="far" icon="user" size="2x"></MDBIcon
></MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem class="my-3">
<MDBSideNavLink class="p-0 d-flex justify-content-center">
<MDBIcon icon="cogs" size="2x"></MDBIcon
></MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavMenu>
</MDBSideNav>
<!-- Sidenav-->
<!-- Content-->
<div id="content" class="page-intro">
<div class="mask p-4 text-center">
<h1>Natalie Smith</h1>
<h2>Portfolio</h2>
</div>
</div>
<!-- Content-->
</template>
<script>
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon
} from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon
},
setup() {
const sidenavSlimDark = ref(true);
return {
sidenavSlimDark
};
}
};
</script>
<style>
.page-intro {
background-image: url("https://mdbootstrap.com/img/Photos/Others/img%20(52).jpg");
background-size: cover;
background-position-x: center;
background-color: white;
width: 100vw;
height: 100vh;
}
.mask {
background-color: rgba(66, 66, 66, 0.4);
width: 100%;
height: 100%;
color: rgba(255, 255, 255, 0.8);
}
.mask h1 {
margin-top: 220px;
font-size: 6rem;
}
.mask h2 {
font-size: 2.8rem;
}
@media (max-width: 500px) {
.mask h1 {
font-size: 4rem;
}
.mask h2 {
font-size: 2rem;
}
}
</style>
4. MDB Navigation
Navigation template based on MDB documentation with the following settings:
- Hidden on screens smaller then
1400px -
padding-left: 240pxadded via CSS to theheaderandmainon the screens larger then1400pxto push the content out of the sidenav area -
Sidenav toggler added to the Navbar and hidden on screen larger then
1400px -
On screens smaller then
1400pxsidenav mode changes fromsidetoover.
<template>
<!-- Main navigation -->
<header>
<!-- Sidenav-->
<MDBSideNav
v-model="sidenavMDB"
id="sidenavMDB"
contentSelector="#page-content"
:modeBreakpoint="1400"
:closeOnEsc="true"
>
<div class="d-flex justify-content-center py-4">
<img
id="MDB-logo"
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
alt="MDB Logo"
draggable="false"
/>
</div>
<MDBSideNavMenu accordion>
<MDBSideNavItem>
<MDBSideNavLink href="/">
<MDBIcon icon="chart-area" class="fa-fw me-3"></MDBIcon>Website
Traffic</MDBSideNavLink
>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="cogs" title="Settings">
<MDBSideNavItem>
<MDBSideNavLink>Profile</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Account</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
<MDBSideNavItem collapse icon="lock" title="Password">
<MDBSideNavItem>
<MDBSideNavLink>Request password</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>Reset password</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavItem>
</MDBSideNavMenu>
</MDBSideNav>
<!-- Sidenav-->
<!-- Navbar-->
<MDBNavbar expand="lg" light bg="light" container id="main-navbar">
<MDBNavbarToggler @click="sidenavMDB = !sidenavMDB" target="#sidenavMDB">
<MDBIcon icon="bars" />
</MDBNavbarToggler>
<MDBCollapse id="navbarSupportedContent">
<MDBRow class="g-3 align-items-center">
<MDBInput
wrapperClass="col-auto"
label='Search (ctrl + "/" to focus)'
v-model="input1"
/>
<MDBCol auto>
<a class="m-1" href="#!" role="button" style="color: #616161;">
<MDBIcon icon="search"></MDBIcon>
</a>
</MDBCol>
</MDBRow>
</MDBCollapse>
<MDBNavbarNav right class="d-flex flex-row">
<!-- Navbar dropdown -->
<MDBDropdown v-model="dropdown1" class="nav-item me-3 me-lg-0">
<MDBDropdownToggle
tag="a"
class="nav-link"
@click="dropdown1 = !dropdown1"
><MDBIcon icon="bell" />
<MDBBadge notification color="danger" pill>1</MDBBadge>
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem href="#">Action</MDBDropdownItem>
<MDBDropdownItem href="#">Another Action</MDBDropdownItem>
<MDBDropdownItem href="#">Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBNavbarItem href="#" class="me-3 me-lg-0">
<MDBIcon icon="fill-drip" />
</MDBNavbarItem>
<MDBNavbarItem href="#" class="me-3 me-lg-0">
<MDBIcon iconStyle="fab" icon="github" />
</MDBNavbarItem>
<MDBDropdown v-model="dropdown2" class="nav-item me-3 me-lg-0">
<MDBDropdownToggle
tag="a"
class="nav-link"
@click="dropdown2 = !dropdown2"
>
<i class="united kingdom flag m-0"></i>
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem href="#"
><i class="united kingdom flag"></i>English
<i class="fa fa-check text-success ms-2"></i>
</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem href="#"
><i class="poland flag"></i>Polski
</MDBDropdownItem>
<MDBDropdownItem href="#"
><i class="china flag"></i>中文
</MDBDropdownItem>
<MDBDropdownItem href="#"
><i class="japan flag"></i>日本語
</MDBDropdownItem>
<MDBDropdownItem href="#"
><i class="germany flag"></i>Deutsch
</MDBDropdownItem>
<MDBDropdownItem href="#"
><i class="france flag"></i>Français
</MDBDropdownItem>
<MDBDropdownItem href="#"
><i class="spain flag"></i>Español
</MDBDropdownItem>
<MDBDropdownItem href="#"
><i class="russia flag"></i>Русский
</MDBDropdownItem>
<MDBDropdownItem href="#"
><i class="portugal flag"></i>Português
</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown v-model="dropdown3" class="nav-item me-3 me-lg-0">
<MDBDropdownToggle
tag="a"
class="nav-link"
@click="dropdown3 = !dropdown3"
><img
src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
class="rounded-circle"
height="22"
alt=""
loading="lazy"
/>
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem href="#">My profile</MDBDropdownItem>
<MDBDropdownItem href="#">Settings</MDBDropdownItem>
<MDBDropdownItem href="#">Logout</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarNav>
</MDBNavbar>
<!-- Navbar-->
</header>
<!-- Main navigation -->
<!--Main layout-->
<main style="margin-top: 58px" id="page-content">
<div class="container"></div>
</main>
<!--Main layout-->
<!--Footer-->
<footer></footer>
<!--Footer-->
</template>
<script>
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBCollapse,
MDBIcon,
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarToggler,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBInput,
MDBBadge,
MDBRow,
MDBCol
} from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBCollapse,
MDBIcon,
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarToggler,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBInput,
MDBBadge,
MDBRow,
MDBCol
},
setup() {
const sidenavMDB = ref(true);
const dropdown1 = ref(false);
const dropdown2 = ref(false);
const dropdown3 = ref(false);
const input1 = ref("");
return {
sidenavMDB,
dropdown1,
dropdown2,
dropdown3,
input1
};
}
};
</script>
<style>
.page-intro {
background-size: cover;
background-position-x: center;
background-color: white;
width: 100vw;
height: 100vh;
}
@media (min-width: 1400px) {
main,
#main-navbar {
padding-left: 240px;
}
}
</style>
Sidenav - API
Import
<script>
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
} from 'mdb-vue-ui-kit';
</script>
Properties
SideNav
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'nav' |
Defines tag of the MDBSideNav element |
<MDBSideNav tag="div" />
|
v-model
|
String | false |
Opens / closes side navigation |
<MDBSideNav v-model="true" />
|
color
|
String | "primary" |
Changes a color of active/hovered links and categories |
<MDBSideNav color="secondary" />
|
relative
|
Boolean | false |
Sets position relative on MDBSideNav component. When using
relative place sidenav component inside fixed height wrapper.
|
<MDBSideNav relative /> |
absolute
|
Boolean | false |
Sets position absolute on MDBSideNav component. When using
absolute place sidenav component inside fixed height wrapper.
|
<MDBSideNav absolute /> |
mode
|
String | 'over |
Changes the MDBSideNav position mode. Accepted values :
"over | side | push"
|
<MDBSideNav mode="side" />
|
light
|
Boolean | false |
Changes the MDBSideNav template to light |
<MDBSideNav light /> |
dark
|
Boolean | false |
Changes the MDBSideNav template to dark |
<MDBSideNav dark /> |
right
|
Boolean | false |
Sets the MDBSideNav on the right side of the window instead of the left
|
<MDBSideNav right /> |
slim
|
Boolean | false |
Changes the MDBSideNav mode to slim |
<MDBSideNav :slim="true" />
|
slimCollapsed
|
Boolean | false |
Initializes a component in a slim mode |
<MDBSideNav :slimCollapsed="true" />
|
slimWidth
|
Number | 60 |
Changes the width of the slim MDBSideNav |
<MDBSideNav :slimWidth="90" />
|
sidenavWidth
|
Number | 240 |
Changes the width of the MDBSideNav |
<MDBSideNav :sidenavWidth="90" />
|
backdrop
|
Boolean | true |
Adds/removes a backdrop in an over mode |
<MDBSideNav :backdrop="false" />
|
expandOnHover
|
Boolean | false |
Expands/collapses slim mode on mouseover / mouseleave |
<MDBSideNav :expandOnHover="true" />
|
closeOnEsc
|
Boolean | false |
Closes a side drawer on ESC key (only when toggler is visible) |
<MDBSideNav :closeOnEsc="true" />
|
modeBreakpoint
|
Number | |
CDefines breakpoint for change MDBSideNav mode from side to over |
<MDBSideNav :closeOnEsc="true" />
|
SideNav Menu
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'ul' |
Defines tag of the MDBSideNavMenu element |
<MDBSideNavMenu tag="div" />
|
accordion
|
Boolean | 'false' |
Enables accordion behaviour in a navigation container |
<MDBSideNavMenu accordion />
|
scrollContainer
|
Boolean | 'false' |
Enables MDBScrollbar for MDBSideNavMenu component |
<MDBSideNavMenu scrollContainer />
|
SideNav Item
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'li' |
Defines tag of the MDBSideNavItem element |
<MDBSideNavItem tag="div" />
|
SideNav Link
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'a' |
Defines tag of the MDBSideNavLink element |
<MDBSideNavLink tag="div" />
|
href
|
String | '' |
Makes MDBSideNavLink behave like an a element |
<MDBSideNavLink href="https://mdbootstrap.com/" />
|
to
|
String | '' |
Makes MDBSideNavLink behave like a router-link element
|
<MDBSideNavLink to="/components/sidenav" />
|
exact
|
Boolean | false |
Sets exact ttribute of the component |
<MDBSideNavLink to="/components/sidenav" exact />
|
newTab
|
Boolean | false |
Used to have a page opened in a fresh browser's tab. Equivalent to
target="_blank" anchor element attribute
|
<MDBSideNavLink to="/components/sidenav" newTab />
|
v-model
|
String | false |
When MDBSideNavLink is used along with MDBCollapse to
create a collapsible category pass a v-model value to both components
for proper functionality
|
<MDBSideNavLink v-model="true" />
|
icon
|
String | '' |
Defines icon. |
<MDBSideNavLink icon="camera" />
|
iconStyle
|
String | 'fas' |
Defines icon style. Available options: fas, far,
fab, fal, fad.
|
<MDBSideNavLink icon="mdb" iconStyle="fab" />
|
iconSize
|
String | '' |
Defines icon size. |
<MDBSideNavLink icon="camera" iconSize="3x" />
|
iconFlag
|
String | '' |
Changes icon to a flag. |
<MDBSideNavLink iconFlag="fr" />
|
ripple
|
[Object, Boolean] | true |
Defines
ripple
configuration or disables it if false.
|
<MDBSideNavLink :ripple="{ color: 'primary' }" />
|