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.
Drawer
Bootstrap 5 Drawer component
Responsive navigation Drawer built with the latest Bootstrap 5. Examples like sliding side drawer in a container, multilevel, material, right drawer & more.
If you need a more advanced Drawer and more options, see our main SideNav documentation. This component is sometimes also referred to as Side Navbar, Sidebar or Offcanvas navigation.
Note: Read the API tab to find all available options and advanced customization
Basic example
In the basic version, the side navigation will appear over your website's content after clicking on a toggler.
Note: Use 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.
<!-- Sidenav -->
<nav
id="sidenav-1"
data-mdb-sidenav-init class="sidenav"
data-mdb-hidden="false"
>
<ul class="sidenav-menu">
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link"
><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a
>
<ul class="sidenav-collapse show">
<li class="sidenav-item">
<a class="sidenav-link">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</li>
<li class="sidenav-item">
<a class="sidenav-link"
><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a
>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link">Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link"
>Link 5</a
>
</li>
</ul>
</li>
</ul>
</nav>
<!-- Sidenav -->
<!-- Toggler -->
<button data-mdb-button-init
data-mdb-toggle="sidenav"
data-mdb-target="#sidenav-1"
data-mdb-ripple-init class="btn btn-primary"
aria-controls="#sidenav-1"
aria-haspopup="true"
>
<i class="fas fa-bars"></i>
</button>
<!-- Toggler -->
Inner scroll
Passing a selector of an inner element to the
scrollContainer option will initialize MDB scrollbar only on this container (by
default it's initialized on the sidenav's main element).
<!-- Sidenav -->
<nav
id="sidenav-3"
data-mdb-sidenav-init class="sidenav"
data-mdb-scroll-container="#scroll-container"
data-mdb-mode="side"
>
<div class="text-center">
<h3 class="py-4">Examples</h3>
<hr class="m-0" />
</div>
<ul id="scroll-container" class="sidenav-menu">
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 2</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 3</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 4</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 5</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 6</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 7</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 8</span></a
>
</li>
</ul>
<div class="text-center" style="min-height: 3rem;">
<hr class="mt-0 mb-2" />
<small>mdbootstrap.com</small>
</div>
</nav>
<!-- Sidenav-->
Full-screen examples
The following examples show various settings of the side navigation component in a full-screen mode.
2. Side navigation with a mode transition
Resize the window to change the mode from side to over.
<!-- Sidenav -->
<nav
id="full-screen-example"
class="sidenav bg-body-tertiary"
data-mdb-color="dark"
data-mdb-mode="side"
data-mdb-hidden="false"
data-mdb-scroll-container="#scrollContainer"
>
<div class="mt-4">
<div id="header-content" class="ps-3">
<img
src="https://mdbcdn.b-cdn.net/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>
<div id="scrollContainer">
<ul class="sidenav-menu">
<li class="sidenav-item">
<a class="sidenav-link" href="/">
<i class="fas fa-envelope fa-fw me-3"></i>Inbox</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-paper-plane fa-fw me-3"></i>Outbox</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-address-book fa-fw me-3"></i>Contacts</a
>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link">Family</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="/previews/mdb-ui-kit/sidenav/2.html">Friends</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Work</a>
</li>
</ul>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-file fa-fw me-3"></i>Drafts</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-heart fa-fw me-3"></i>Favourites</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-star fa-fw me-3"></i>Starred</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-trash fa-fw me-3"></i>Trash</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-ban fa-fw me-3"></i>Spam</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link"
><i class="fas fa-tag fa-fw me-3"></i>Categories</a
>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link">Social</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Notifications</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Recent</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Uploads</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Backups</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Offers</a>
</li>
</ul>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-sticky-note fa-fw me-3"></i>Notes</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-user-circle fa-fw me-3"></i>Personal</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-ellipsis-h fa-fw me-3"></i>More</a
>
</li>
</ul>
<hr class="m-0" />
<ul class="sidenav-menu">
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-cogs fa-fw me-3"></i>Settings</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-user fa-fw me-3"></i>Profile</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-shield-alt fa-fw me-3"></i>Privacy</a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link">
<i class="fas fa-user-astronaut fa-fw me-3"></i>Log out</a
>
</li>
</ul>
</div>
<div class="text-center" style="height: 100px;">
<hr class="mb-4 mt-0" />
<p>MDBootstrap.com</p>
</div>
</nav>
<!-- Sidenav -->
<!-- Content -->
<div class="mdb-page-content text-center page-intro bg-body-tertiary">
<div class="text-center py-5">
<h3 class="my-5">Resize to change the mode</h3>
<div>
<img class="rounded" src="https://mdbcdn.b-cdn.net/img/Photos/Others/img%20(53).webp" />
</div>
<button data-mdb-button-init
id="toggler"
data-mdb-ripple-init class="btn btn-dark mt-5"
data-mdb-toggle="sidenav"
data-mdb-target="#full-screen-example"
>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<!-- Content -->
const sidenav = document.getElementById('full-screen-example');
const sidenavInstance = 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) {
sidenavInstance.changeMode('over');
sidenavInstance.hide();
} else {
sidenavInstance.changeMode('side');
sidenavInstance.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.
<!-- Sidenav -->
<nav
id="full-screen-example"
class="sidenav bg-dark"
data-mdb-color="light"
data-mdb-slim="true"
data-mdb-expandable="false"
data-mdb-slim-collapsed="true"
data-mdb-slim-width="90"
data-mdb-mode="side"
data-mdb-content="#content"
>
<div class="text-center mt-4">
<a class="ripple rounded-circle" data-mdb-color="light" href="#">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(29).webp"
alt="avatar"
class="rounded-circle img-fluid"
style="max-width: 60px;"
/>
</a>
</div>
<hr />
<ul class="sidenav-menu">
<li class="sidenav-item my-3">
<a class="sidenav-link p-0 d-flex justify-content-center">
<i class="far fa-heart fa-2x"></i
></a>
</li>
<li class="sidenav-item my-3">
<a class="sidenav-link p-0 d-flex justify-content-center">
<i class="far fa-envelope fa-2x"></i
></a>
</li>
<li class="sidenav-item my-3">
<a class="sidenav-link p-0 d-flex justify-content-center">
<i class="far fa-user fa-2x"></i
></a>
</li>
<li class="sidenav-item my-3">
<a class="sidenav-link p-0 d-flex justify-content-center">
<i class="fa fa-cogs fa-2x"></i
></a>
</li>
</ul>
</nav>
<!-- 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 -->
window.addEventListener('load', () => {
const sidenav = document.getElementById('full-screen-example');
const sidenavInstance = mdb.Sidenav.getInstance(sidenav);
sidenavInstance.show();
});
.sidenav[data-mdb-slim-width='90'] {
width: 90px;
}
.page-intro {
background-image: url('https://mdbcdn.b-cdn.net/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;
}
}
Drawer - 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.
<nav data-mdb-sidenav-init class="sidenav" id="sidenav" data-mdb-color="secondary">
<!-- ... -->
</nav>
<button type="button" data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidenav">
Toggle sidenav
</button>
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 sidenavInstance = mdb.Sidenav.getInstance(document.getElementById('sidenav'));
sidenavInstance.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.
$('#sidenav').sidenav('update', { color: 'warning'})
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 | 240 |
A component's width (pixels) |
Methods
| Name | Description | Example |
|---|---|---|
changeMode
|
Changes a position mode (options: over, side, push) |
sidenavInstance.changeMode('push')
|
dispose
|
Removes mdb.Sidenav instance |
sidenavInstance.dispose()
|
hide |
Hides a navigation drawer |
sidenavInstance.hide()
|
show |
Shows a navigation drawer |
sidenavInstance.show()
|
toggle |
Manually toggles a component |
sidenavInstance.toggle()
|
toggleSlim
|
Manually toggles a slim state |
sidenavInstance.toggleSlim()
|
update(options)
|
Updates a component |
sidenavInstance.update({ mode: 'side' })
|
const sidenav = document.getElementById('mySidenav')
const sidenavInstance = new mdb.Sidenav(sidenav)
sidenavInstance.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';