Sidenav

Side navigation drawer

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 show and hide methods to toggle navigation with JavaScript.

Note: Adding the show class to a sidenav collapse element will expand this category on render.

//Make sidenav instantly visible const instance = mdb.Sidenav.getInstance(document.getElementById('sidenav-1')); instance.show();

Positioning

While using the side and push modes, you can specify the selector for your page's content - this way, the component will automatically update paddings and margins. To customize this behaviour in a non-standard way, use a combination of media queries & update.mdb.sidenav event

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 attribute 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 darker background with the side navigation, we recommend setting the color attribute to "light" for better contrast.

Inner scroll

Passing a selector of an inner element to the scrollContainer option will initialize Perfect Scrollbar only on this container (by default it's initialized on the sidenav's main element).

Slim example

You can hide/show elements in the slim mode by setting data-mdb-slim attribute on them - depending on value they will be either visible only in a slim or an expanded mode. Elements without this attribute will appear in both modes.

//Initialize it with JS to make it instantly visible const instance = new mdb.Sidenav(document.getElementById('sidenav-4')); instance.show(); document.getElementById('slim-toggler').addEventListener('click', () => { instance.toggleSlim(); })

Accordion example

Using accordion option 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 attribute to true.

...

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
.page-intro { background-color: white; width: 100vw; height: 100vh; } mask { width: 100%; } .mask img { max-width: 80%; } @media (max-width: 660px) { .mask img { width: 100%; } }

2. Side navigation with a mode transition

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

View full screen demo

Resize to change the mode

 const sidenav = document.getElementById('full-screen-example'); const instance = mdb.Sidenav.getInstance(sidenav); let innerWidth = null; const setMode = (e) => { // Check necessary for Android devices if (window.innerWidth === innerWidth) { return; } innerWidth = window.innerWidth; if (window.innerWidth < 660) { instance.changeMode('over'); instance.hide(); } else { instance.changeMode('side'); instance.show(); } }; setMode(); // Event listeners window.addEventListener('resize', setMode); .page-intro { background-color: white; width: 100vw; min-height: 100vh; } img { max-width: 80%; } .mdb-page-content { padding-left: 240px; transition: padding 0.3s linear; } #toggler { display: none; } @media (max-width: 660px) { .mdb-page-content { padding-left: 0px; } #toggler { display: unset; } .mask img { width: 100%; } .sidenav[data-mdb-hidden='false'] { transform: translateX(-100%); } }

3. Slim side navigation (dark)

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

View full screen demo

Natalie Smith

Portfolio

 window.addEventListener('load', () => { const sidenav = document.getElementById('full-screen-example'); const instance = mdb.Sidenav.getInstance(sidenav); instance.show(); }); .sidenav[data-mdb-slim-width='90'] { width: 90px; } .page-intro { background-image: url('https://mdbootstrap.com/img/Photos/Others/img%20(52).jpg'); background-size: cover; background-position-x: center; background-color: white; width: 100vw; height: 100vh; } .mask { background-color: rgba(66, 66, 66, 0.4); width: 100%; height: 100%; color: rgba(255, 255, 255, 0.8); } .mask h1 { margin-top: 220px; font-size: 6rem; } .mask h2 { font-size: 2.8rem; } @media (max-width: 500px) { .mask h1 { font-size: 4rem; } .mask h2 { font-size: 2rem; } }

Sidenav - API

Usage

Via data attributes

Elements with the sidenav class will be automatically initialized - you can set all available options with data attributes. Toggling the element can also be done without any additional Javascript code - just set data-mdb-toggle and data-mdb-target attribute on the navigation's toggler.

Via JavaScript

You can access an instance from your Javascript code, by using the getInstance static method of the Sidenav class - it allows making use of all the public methods listed in the Methods section.

const instance = mdb.Sidenav.getInstance(document.getElementById('sidenav')); instance.update({ color: 'warning'});

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

const instance = mdb.Sidenav.getInstance(document.getElementById('sidenav')); instance.show();

Options

Name Type Default Description
accordion Boolean false Enables accordion behaviour in a navigation container
backdrop Boolean true Adds/removes a backdrop in an over mode
backdropClass String - Adds a custom class to a backdrop
closeOnEsc Boolean true Closes a side drawer on ESC key (only when toggler is visible)
color String primary Changes a color of active/hovered links and categories
content String Selector for a content to which a component will add paddings/margins in push/side modes
expandOnHover Boolean false Expands/collapses slim mode on mouseover / mouseleave
hidden Boolean true Initializes navigation outside a viewport
mode String over Sets position mode - available options: over, side, push
scrollContainer String Selector for a scrollable container inside a side drawer
slim Boolean false Enables a slim mode
slimCollapsed Boolean false Initializes a component in a slim mode
slimWidth Number 70 A component's width in a slim mode (pixels)
position String fixed Sets CSS position - accepted values: fixed, absolute
right Boolean false Initializes sidenav on a right side
transitionDuration Number 300 Sets a length of transitions (in milliseconds)
width Number 70 A component's width (pixels)

Methods

Name Description Example
changeMode Changes a position mode (options: over, side, push) instance.changeMode('push')
dispose Removes mdb.Sidenav instance instance.dispose()
hide Hides a navigation drawer instance.hide()
show Shows a navigation drawer instance.show()
toggle Manually toggles a component instance.toggle()
toggleSlim Manually toggles a slim state instance.toggleSlim()
update(options) Updates a component instance.update({ mode: 'side' })
const sidenav = document.getElementById('mySidenav') const instance = new mdb.Sidenav(sidenav) instance.show()

Events

Name Description
show.mdb.sidenav Emitted when a component has been toggled
shown.mdb.sidenav Emitted once a component is shown (after transition)
hide.mdb.sidenav Emitted when a component has been toggled
hidden.mdb.sidenav Emitted once a component is hidden (after transition)
expand.mdb.sidenav Emitted when a slim mode has been toggled
expanded.mdb.sidenav Emitted once a component has expanded from a slim mode (after transition)
collapse.mdb.sidenav Emitted when a slim mode has been toggled
collapsed.mdb.sidenav Emitted once a component has collapsed into a slim mode (after transition)
update.mdb.sidenav Emitted whenever a content's offset should be updated (push/side mode). You can access the suggested values by event.padding and event.margin properties
const sidenav = document.getElementById('mySidenav') sidenav.addEventListener('update.mdb.sidenav', event => { console.log(event.margin, event.padding); }

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

import { Sidenav } from 'mdb-ui-kit';