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.


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.

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:


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.


Inner scroll

Passing a scrollContainer property to a MDBSideNavMenu will initialize MDBScrollbar on this element (by default it's initialized on the MDBSideNav).


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.


Accordion example

Using accordion property on MDBSideNavMenu will allow expanding only one category at once.


Groups

You can use more than one menu inside the side navigation - in this case, accordions will be independent of one another.


Right

Place the navigation on the other side by setting the right property on MDBSideNav.


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

2. Side navigation with a mode transition

Resize the window to change the mode from side to over.

View full screen demo

3. Slim side navigation (dark)

Non-expandable slim sidenav with a dark background and custom width.

View full screen demo

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

Sidenav - API


Import


        <script>
          import {
            MDBSideNav,
            MDBSideNavMenu,
            MDBSideNavItem,
            MDBSideNavLink,
          } from 'mdb-vue-ui-kit';
        </script>
      

Properties

SideNav

Name Type Default Description Example
tag String 'nav' Defines tag of the MDBSideNav element <MDBSideNav tag="div" />
v-model String false Opens / closes side navigation <MDBSideNav v-model="true" />
color String "primary" Changes a color of active/hovered links and categories <MDBSideNav color="secondary" />
relative Boolean false Sets position relative on MDBSideNav component. When using relative place sidenav component inside fixed height wrapper. <MDBSideNav relative />
absolute Boolean false Sets position absolute on MDBSideNav component. When using absolute place sidenav component inside fixed height wrapper. <MDBSideNav absolute />
mode String 'over Changes the MDBSideNav position mode. Accepted values : "over | side | push" <MDBSideNav mode="side" />
light Boolean false Changes the MDBSideNav template to light <MDBSideNav light />
dark Boolean false Changes the MDBSideNav template to dark <MDBSideNav dark />
right Boolean false Sets the MDBSideNav on the right side of the window instead of the left <MDBSideNav right />
slim Boolean false Changes the MDBSideNav mode to slim <MDBSideNav :slim="true" />
slimCollapsed Boolean false Initializes a component in a slim mode <MDBSideNav :slimCollapsed="true" />
slimWidth Number 60 Changes the width of the slim MDBSideNav <MDBSideNav :slimWidth="90" />
sidenavWidth Number 240 Changes the width of the MDBSideNav <MDBSideNav :sidenavWidth="90" />
backdrop Boolean true Adds/removes a backdrop in an over mode <MDBSideNav :backdrop="false" />
expandOnHover Boolean false Expands/collapses slim mode on mouseover / mouseleave <MDBSideNav :expandOnHover="true" />
closeOnEsc Boolean false Closes a side drawer on ESC key (only when toggler is visible) <MDBSideNav :closeOnEsc="true" />
modeBreakpoint Number CDefines breakpoint for change MDBSideNav mode from side to over <MDBSideNav :closeOnEsc="true" />

SideNav Menu

Name Type Default Description Example
tag String 'ul' Defines tag of the MDBSideNavMenu element <MDBSideNavMenu tag="div" />
accordion Boolean 'false' Enables accordion behaviour in a navigation container <MDBSideNavMenu accordion />
scrollContainer Boolean 'false' Enables MDBScrollbar for MDBSideNavMenu component <MDBSideNavMenu scrollContainer />

SideNav Item

Name Type Default Description Example
tag String 'li' Defines tag of the MDBSideNavItem element <MDBSideNavItem tag="div" />

SideNav Link

Name Type Default Description Example
tag String 'a' Defines tag of the MDBSideNavLink element <MDBSideNavLink tag="div" />
href String '' Makes MDBSideNavLink behave like an a element <MDBSideNavLink href="https://mdbootstrap.com/" />
to String '' Makes MDBSideNavLink behave like a router-link element <MDBSideNavLink to="/components/sidenav" />
exact Boolean false Sets exact ttribute of the component <MDBSideNavLink to="/components/sidenav" exact />
newTab Boolean false Used to have a page opened in a fresh browser's tab. Equivalent to target="_blank" anchor element attribute <MDBSideNavLink to="/components/sidenav" newTab />
v-model String false When MDBSideNavLink is used along with MDBCollapse to create a collapsible category pass a v-model value to both components for proper functionality <MDBSideNavLink v-model="true" />
icon String '' Defines icon. <MDBSideNavLink icon="camera" />
iconStyle String 'fas' Defines icon style. Available options: fas, far, fab, fal, fad. <MDBSideNavLink icon="mdb" iconStyle="fab" />
iconSize String '' Defines icon size. <MDBSideNavLink icon="camera" iconSize="3x" />
iconFlag String '' Changes icon to a flag. <MDBSideNavLink iconFlag="fr" />
ripple [Object, Boolean] true Defines ripple configuration or disables it if false. <MDBSideNavLink :ripple="{ color: 'primary' }" />