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

View full screen demo

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:

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. 
        
            
            <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).

View full screen demo 
        
            
              <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.

View full screen demo 
        
            
            <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.

View full screen demo 
        
            
            <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: 240px added via CSS to the header and main on the screens larger then 1400px to 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 1400px sidenav mode changes from side to over.
View full screen demo 
        
            
              <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>

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

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;