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><script setup lang="ts">
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBBtn,
MDBIcon
} from "mdb-vue-ui-kit";
import { ref } from 'vue';
const sidenav1 = ref(true);
</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><script setup lang="ts">
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBBtn,
MDBIcon
} from "mdb-vue-ui-kit";
import { ref } from "vue";
const sidenavPositions = ref(true);
const mode = ref("over");
const setMode = (value: string) => {
mode.value = value;
};
</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 = event => {
sidenavColor.value = event.target.id.split("-")[1];
};
return {
sidenavColors,
sidenavColor,
setSidenavColor
};
}
};
</script><script setup lang="ts">
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBBtn,
MDBIcon
} from "mdb-vue-ui-kit";
import { ref } from "vue";
const sidenavColors = ref(true);
const sidenavColor = ref("primary");
const setSidenavColor = (event: Event) => {
sidenavColor.value = (event.target as HTMLElement).id.split("-")[1];
};
</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><script setup lang="ts">
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from 'vue';
const sidenavDark = ref(true);
</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><script setup lang="ts">
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from 'vue';
const sidenavScroll = ref(true);
</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="me-3" />
<span class="sidenav-non-slim">Link 1</span>
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem
collapse
icon="grin"
title="Category 1"
:nonSlim="slim1"
: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="slim1"
: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><script setup lang="ts">
import { MDBSideNav, MDBSideNavMenu, MDBSideNavItem, MDBSideNavLink, MDBIcon, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from 'vue';
const slim1 = ref(true);
const sidenavSlim = ref(true);
const slimShow1 = ref(false);
const slimShow2 = ref(false);
</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><script setup lang="ts">
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from 'vue';
const sidenavAccordion = ref(true);
</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><script setup lang="ts">
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from 'vue';
const sidenavGroups = ref(true);
</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><script setup lang="ts">
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from 'vue';
const sidenavRight = ref(true);
</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="true"
backdropStyle="position: fixed"
>
<div class="mt-4">
<div id="header-content" class="ps-3">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(23).webp"
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"/>
Inbox
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="paper-plane" class="fas fa-fw me-3"/>
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"/>
Drafts
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="heart" class="fas fa-fw me-3"/>
Favourites
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="star" class="fas fa-fw me-3"/>
Starred
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="trash" class="fas fa-fw me-3"/>
Trash
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="ban" class="fas fa-fw me-3"/>
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"/>
Notes
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user-circle" class="fas fa-fw me-3"/>
Personal
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="ellipsis-h" class="fas fa-fw me-3"/>
More
</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavMenu>
<hr class="m-0" />
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="cogs" class="fas fa-fw me-3"/>
Settings
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user" class="fas fa-fw me-3"/>
Profile
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="shield-alt" class="fas fa-fw me-3"/>
Privacy
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user-astronaut" class="fas fa-fw me-3"/>
Logout
</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).webp"
/>
</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><script setup lang="ts">
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from "vue";
const sidenavBasic = ref(true);
</script><style>
.page-intro {
width: 100%;
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"
backdropStyle="position: fixed"
>
<div class="mt-4">
<div id="header-content" class="ps-3">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(23).webp"
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"/>
Inbox
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="paper-plane" class="fas fa-fw me-3"/>
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"/>
Drafts
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="heart" class="fas fa-fw me-3"/>
Favourites
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="star" class="fas fa-fw me-3"/>
Starred
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="trash" class="fas fa-fw me-3"/>
Trash
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="ban" class="fas fa-fw me-3"/>
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"/>
Notes
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user-circle" class="fas fa-fw me-3"/>
Personal
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="ellipsis-h" class="fas fa-fw me-3"/>
More
</MDBSideNavLink>
</MDBSideNavItem>
</MDBSideNavMenu>
<hr class="m-0" />
<MDBSideNavMenu>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="cogs" class="fas fa-fw me-3"/>
Settings
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user" class="fas fa-fw me-3"/>
Profile
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="shield-alt" class="fas fa-fw me-3"/>
Privacy
</MDBSideNavLink>
</MDBSideNavItem>
<MDBSideNavItem>
<MDBSideNavLink>
<MDBIcon icon="user-astronaut" class="fas fa-fw me-3"/>
Logout
</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).webp"
/>
</div>
<!-- Toggler-->
<MDBBtn
class="mt-5"
color="dark"
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><script setup lang="ts">
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon,
MDBBtn
} from "mdb-vue-ui-kit";
import { ref } from "vue";
const sidenavMode = ref(true);
const side = ref(true);
const over = ref(false);
</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
:backdrop="false"
>
<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).webp"
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><script setup lang="ts">
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBIcon
} from "mdb-vue-ui-kit";
import { ref } from "vue";
const sidenavSlimDark = ref(true);
</script><style>
.page-intro {
background-image: url("https://mdbootstrap.com/img/Photos/Others/img%20(52).webp");
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"
backdropStyle="position: fixed"
>
<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.webp"
alt="MDB Logo"
draggable="false"
/>
</div>
<MDBSideNavMenu accordion>
<MDBSideNavItem>
<MDBSideNavLink href="/">
<MDBIcon icon="chart-area" class="fa-fw me-3"/>
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>
<MDBRow class="g-3 ms-1 align-items-center">
<MDBCollapse>
<MDBInput
wrapperClass="col-auto"
label='Search (ctrl + "/" to focus)'
v-model="input1"
/>
<MDBCol auto>
<a class="ms-3" href="#!" role="button" style="color: #616161;">
<MDBIcon icon="search"></MDBIcon>
</a>
</MDBCol>
</MDBCollapse>
</MDBRow>
<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="flag flag-united-kingdom"></i>
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem href="#">
<i class="flag-united-kingdom flag"></i>English
<i class="flag flag-united-kingdom"></i>
</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem href="#">
<i class="flag flag-poland"></i>Polski
</MDBDropdownItem>
<MDBDropdownItem href="#">
<i class="flag flag-china"></i>中文
</MDBDropdownItem>
<MDBDropdownItem href="#">
<i class="flag flag-japan"></i>日本語
</MDBDropdownItem>
<MDBDropdownItem href="#">
<i class="flag flag-germany"></i>Deutsch
</MDBDropdownItem>
<MDBDropdownItem href="#">
<i class="flag flag-france"></i>Français
</MDBDropdownItem>
<MDBDropdownItem href="#">
<i class="flag flag-spain"></i>Español
</MDBDropdownItem>
<MDBDropdownItem href="#">
<i class="flag flag-russia"></i>Русский
</MDBDropdownItem>
<MDBDropdownItem href="#">
<i class="flag flag-portugal"></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).webp"
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><script setup lang="ts">
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";
const sidenavMDB = ref(true);
const dropdown1 = ref(false);
const dropdown2 = ref(false);
const dropdown3 = ref(false);
const input1 = ref("");
</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>Related resources
Sidenav - API
Import
<script>
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
} from 'mdb-vue-ui-kit';
</script>Properties
SideNav
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
absolute
|
Boolean | false |
Sets position absolute on MDBSideNav component. When using
absolute place sidenav component inside fixed height wrapper.
|
<MDBSideNav absolute /> |
backdrop
|
Boolean | true |
Adds/removes a backdrop in an over mode |
<MDBSideNav :backdrop="false" />
|
backdropClass
|
String | - |
Adds backdrop custom class |
<MDBSideNav backdropClass="backdrop classes" />
|
backdropStyle
|
String | - |
Adds backdrop custom style |
<MDBSideNav backdropStyle="z-index: 1000" />
|
color
|
String | "primary" |
Changes a color of active/hovered links and categories |
<MDBSideNav color="secondary" />
|
closeOnEsc
|
Boolean | false |
Closes a side drawer on ESC key (only when toggler is visible) |
<MDBSideNav :closeOnEsc="true" />
|
dark
|
Boolean | false |
Changes the MDBSideNav template to dark |
<MDBSideNav dark /> |
expandOnHover
|
Boolean | false |
Expands/collapses slim mode on mouseover / mouseleave |
<MDBSideNav :expandOnHover="true" />
|
light
|
Boolean | false |
Changes the MDBSideNav template to light |
<MDBSideNav light /> |
mode
|
String | 'over |
Changes the MDBSideNav position mode. Accepted values :
"over | side | push"
|
<MDBSideNav mode="side" />
|
modeBreakpoint
|
Number | |
CDefines breakpoint for change MDBSideNav mode from side to over |
<MDBSideNav :modeBreakpoint="1400" />
|
relative
|
Boolean | false |
Sets position relative on MDBSideNav component. When using
relative place sidenav component inside fixed height wrapper.
|
<MDBSideNav relative /> |
right
|
Boolean | false |
Sets the MDBSideNav on the right side of the window instead of the left
|
<MDBSideNav right /> |
scrollLock
|
Boolean | false |
Allows to block scroll while MDBSideNav is active. |
<MDBSideNav :scrollLock="sidenavToggler" />
|
sidenavWidth
|
Number | 240 |
Changes the width of the MDBSideNav |
<MDBSideNav :sidenavWidth="90" />
|
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" />
|
tag
|
String | 'nav' |
Defines tag of the MDBSideNav element |
<MDBSideNav tag="div" />
|
v-model
|
String | false |
Opens / closes side navigation |
<MDBSideNav v-model="true" />
|
SideNav Menu
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
accordion
|
Boolean | 'false' |
Enables accordion behaviour in a navigation container |
<MDBSideNavMenu accordion />
|
scrollContainer
|
Boolean | 'false' |
Enables MDBScrollbar for MDBSideNavMenu component |
<MDBSideNavMenu scrollContainer />
|
tag
|
String | 'ul' |
Defines tag of the MDBSideNavMenu element |
<MDBSideNavMenu tag="div" />
|
filter
|
Boolean | false |
Adds search bar. |
<MDBSideNavMenu filter />
|
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 |
|---|---|---|---|---|
exact
|
Boolean | false |
Sets exact ttribute of the component |
<MDBSideNavLink to="/components/sidenav" exact />
|
href
|
String | '' |
Makes MDBSideNavLink behave like an a element |
<MDBSideNavLink href="https://mdbootstrap.com/" />
|
icon
|
String | '' |
Defines icon. |
<MDBSideNavLink icon="camera" />
|
iconClass
|
String | "me-3" |
Changes icon classes. |
<MDBSideNavLink iconClass="me-3" />
|
iconFlag
|
String | '' |
Changes icon to a flag. |
<MDBSideNavLink iconFlag="fr" />
|
iconSize
|
String | '' |
Defines icon size. |
<MDBSideNavLink icon="camera" iconSize="3x" />
|
iconStyle
|
String | 'fas' |
Defines icon style. Available options: fas, far,
fab, fal, fad.
|
<MDBSideNavLink icon="mdb" iconStyle="fab" />
|
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 />
|
ripple
|
[Object, Boolean] | true |
Defines ripple configuration or disables it if false.
|
<MDBSideNavLink :ripple="{ color: 'primary' }" />
|
tag
|
String | 'a' |
Defines tag of the MDBSideNavLink element |
<MDBSideNavLink tag="div" />
|
to
|
String | '' |
Makes MDBSideNavLink behave like a router-link element
|
<MDBSideNavLink to="/components/sidenav" />
|
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" />
|
CSS variables
As part of MDB’s evolving CSS variables approach, sidenav now use local CSS variables on .sidenav and .sidenav-backdrop for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
Sidenav CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.
// .sidenav
--#{$prefix}sidenav-transform: #{$sidenav-transform};
--#{$prefix}sidenav-zindex: #{$sidenav-zindex};
--#{$prefix}sidenav-background-color: #{$sidenav-background-color};
--#{$prefix}sidenav-width: #{$sidenav-width};
--#{$prefix}sidenav-height: #{$sidenav-height};
--#{$prefix}sidenav-box-shadow: #{$sidenav-box-shadow};
--#{$prefix}sidenav-data-hidden-false-transform: #{$sidenav-data-hidden-false-transform};
--#{$prefix}sidenav-data-color-light-color: #{$sidenav-data-color-light-color};
--#{$prefix}sidenav-data-right-true-transform: #{$sidenav-data-right-true-transform};
--#{$prefix}sidenav-data-slim-collapsed-true-width: #{$sidenav-data-slim-collapsed-true-width};
--#{$prefix}sidenav-menu-padding: #{$sidenav-menu-padding};
--#{$prefix}sidenav-collapse-sidenav-link-font-size: #{$sidenav-collapse-sidenav-link-font-size};
--#{$prefix}sidenav-collapse-sidenav-link-height: #{$sidenav-collapse-sidenav-link-height};
--#{$prefix}sidenav-link-font-size: #{$sidenav-link-font-size};
--#{$prefix}sidenav-link-padding-y: #{$sidenav-link-padding-y};
--#{$prefix}sidenav-link-padding-x: #{$sidenav-link-padding-x};
--#{$prefix}sidenav-link-height: #{$sidenav-link-height};
--#{$prefix}sidenav-link-border-radius: #{$sidenav-link-border-radius};
--#{$prefix}sidenav-link-transition: #{$sidenav-link-transition};
--#{$prefix}sidenav-link-hover-background-color: #{$sidenav-link-hover-background-color};
--#{$prefix}sidenav-link-active-focus-background-color: #{$sidenav-link-active-focus-background-color};
--#{$prefix}sidenav-link-active-color: #{$sidenav-link-active-color};
--#{$prefix}sidenav-subheading-font-size: #{$sidenav-subheading-font-size};
--#{$prefix}sidenav-subheading-padding-y: #{$sidenav-subheading-padding-y};
--#{$prefix}sidenav-subheading-padding-x: #{$sidenav-subheading-padding-x};
--#{$prefix}sidenav-subheading-fw: #{$sidenav-subheading-fw};
--#{$prefix}sidenav-sm-link-pt: #{$sidenav-sm-link-pt};
--#{$prefix}sidenav-sm-link-pb: #{$sidenav-sm-link-pb};
--#{$prefix}sidenav-rotate-icon-margin-right: #{$sidenav-rotate-icon-margin-right};
--#{$prefix}sidenav-rotate-icon-transition: #{$sidenav-rotate-icon-transition};
--#{$prefix}sidenav-light-color: #{$sidenav-light-color};
// .sidenav-backdrop
--#{$prefix}sidenav-backdrop-zindex: #{$sidenav-backdrop-zindex};
--#{$prefix}sidenav-backdrop-background-color: #{$sidenav-backdrop-background-color};SCSS variables
$sidenav-zindex: 1035;
$sidenav-backdrop-zindex: 1034;
$sidenav-transform: translateX(-100%);
$sidenav-background-color: $white;
$sidenav-width: 240px;
$sidenav-height: 100vh;
$sidenav-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
$sidenav-data-hidden-false-transform: translateX(0%);
$sidenav-data-color-light-color: rgba(255, 255, 255, 0.6);
$sidenav-data-right-true-transform: translateX(100%);
$sidenav-data-slim-collapsed-true-width: 77px;
$sidenav-menu-padding: 0.2rem;
$sidenav-collapse-sidenav-link-font-size: 0.78rem;
$sidenav-collapse-sidenav-link-height: 1.5rem;
$sidenav-collapse-sidenav-link-padding-left: 3rem;
$sidenav-link-font-size: 0.89rem;
$sidenav-link-padding-y: 1rem;
$sidenav-link-padding-x: 1.5rem;
$sidenav-link-height: 3rem;
$sidenav-link-border-radius: 5px;
$sidenav-link-transition: all 0.3s linear;
$sidenav-link-hover-color: $primary;
$sidenav-link-hover-background-color: #f6f9fc;
$sidenav-link-active-focus-color: $sidenav-link-hover-color;
$sidenav-link-active-focus-background-color: $sidenav-link-hover-background-color;
$sidenav-link-active-color: $sidenav-link-hover-color;
$sidenav-rotate-icon-margin-right: 0.8rem;
$sidenav-rotate-icon-transition: transform 0.3s;
$sidenav-backdrop-background-color: rgba(0, 0, 0, 0.1);
$sidenav-light-color: $sidenav-data-color-light-color;
$sidenav-subheading-font-size: 0.6rem;
$sidenav-subheading-padding-y: 1rem;
$sidenav-subheading-padding-x: 1.5rem;
$sidenav-subheading-fw: 700;
$sidenav-sm-link-pt: 0.4rem;
$sidenav-sm-link-pb: $sidenav-sm-link-pt;