Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, ornare quis
interdum a, cursus in quam. Quisque risus libero, cursus eget eros vitae, aliquam placerat
velit. Vivamus luctus eros id sagittis luctus. Pellentesque felis nulla, rhoncus viverra
nunc vitae, viverra aliquam ante. Ut feugiat mattis tempor.
Sidenav
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
Required ES init:
Sidenav
*
* UMD autoinits are enabled
by default. This means that you don't need to initialize
the component manually. However if you are using MDBootstrap ES format then you should pass
the required components to the initMDB method.
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
data-mdb-sidenav-init
id="sidenav-1"
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-ripple-init
data-mdb-toggle="sidenav"
data-mdb-target="#sidenav-1"
class="btn btn-primary"
aria-controls="#sidenav-1"
aria-haspopup="true"
>
<i class="fas fa-bars"></i>
</button>
<!-- Toggler -->
// Initialization for ES Users
import { Sidenav, initMDB } from "mdb-ui-kit";
initMDB({ Sidenav });
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
data-mdb-sidenav-init
id="sidenav-3"
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-->
// Initialization for ES Users
import { Sidenav, initMDB } from "mdb-ui-kit";
initMDB({ 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
data-mdb-sidenav-init
id="full-screen-example"
class="sidenav bg-light"
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-light">
<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-ripple-init
id="toggler"
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 -->
.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%);
}
}
// Initialization for ES Users
import { Sidenav, initMDB } from "mdb-ui-kit";
initMDB({ Sidenav });
const sidenav = document.getElementById('full-screen-example');
const sidenavInstance = 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);
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);
3. Slim side navigation (dark)
Non-expandable slim sidenav with a dark background and custom width.
<!-- Sidenav -->
<nav
data-mdb-sidenav-init
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 data-mdb-ripple-init class="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 -->
.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;
}
}
// Initialization for ES Users
import { Sidenav, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Sidenav, Ripple });
window.addEventListener('load', () => {
const sidenav = document.getElementById('full-screen-example');
const sidenavInstance = Sidenav.getInstance(sidenav);
sidenavInstance.show();
});
window.addEventListener('load', () => {
const sidenav = document.getElementById('full-screen-example');
const sidenavInstance = mdb.Sidenav.getInstance(sidenav);
sidenavInstance.show();
});
Sidenav small and with categories
<!-- Sidenav -->
<nav
data-mdb-sidenav-init
id="sidenav-9"
class="sidenav sidenav-sm"
data-mdb-hidden="false"
data-mdb-accordion="true"
>
<a
data-mdb-ripple-init
class="d-flex justify-content-center py-4 mb-3"
style="border-bottom: 2px solid #f5f5f5"
href="#!"
data-mdb-ripple-color="primary"
>
<img
id="MDB-logo"
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
alt="MDB Logo"
draggable="false"
/>
</a>
<ul class="sidenav-menu px-2 pb-5">
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fas fa-tachometer-alt fa-fw me-3"></i><span>Overview</span></a
>
</li>
<li class="sidenav-item pt-3">
<span class="sidenav-subheading text-muted">Create</span>
<a class="sidenav-link" href="">
<i class="fas fa-plus fa-fw me-3"></i><span>Project</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fas fa-plus fa-fw me-3"></i><span>Database</span></a
>
</li>
<li class="sidenav-item pt-3">
<span class="sidenav-subheading text-muted">Manage</span>
<a class="sidenav-link" href="">
<i class="fas fa-cubes fa-fw me-3"></i><span>Projects</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fas fa-database fa-fw me-3"></i><span>Databases</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fas fa-stream fa-fw me-3"></i><span>Custom domains</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fas fa-code-branch fa-fw me-3"></i><span>Repositories</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fas fa-users fa-fw me-3"></i><span>Team</span></a
>
</li>
<li class="sidenav-item pt-3">
<span class="sidenav-subheading text-muted">Maintain</span>
<a class="sidenav-link" href="">
<i class="fas fa-chart-pie fa-fw me-3"></i><span>Analytics</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fas fa-sync fa-fw me-3"></i><span>Backups</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fas fa-shield-alt fa-fw me-3"></i><span>Security</span></a
>
</li>
<li class="sidenav-item pt-3">
<span class="sidenav-subheading text-muted">Admin</span>
<a class="sidenav-link" href="">
<i class="fas fa-money-bill fa-fw me-3"></i><span>Billing</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fas fa-file-contract fa-fw me-3"></i><span>License</span></a
>
</li>
<li class="sidenav-item pt-3">
<span class="sidenav-subheading text-muted">Tools</span>
<a class="sidenav-link" href="">
<i class="fas fa-hand-pointer fa-fw me-3"></i><span>Drag & drop builder</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fas fa-code fa-fw me-3"></i><span>Online code editor</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fas fa-copy fa-fw me-3"></i><span>SFTP</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fab fa-jenkins fa-fw me-3"></i><span>Jenkins</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link" href="">
<i class="fab fa-gitlab fa-fw me-3"></i><span>GitLab</span></a
>
</li>
</ul>
</nav>
<!-- Sidenav -->
<!-- Toggler -->
<button
data-mdb-ripple-init
data-mdb-toggle="sidenav"
data-mdb-target="#sidenav-9"
class="btn btn-primary"
aria-controls="#sidenav-9"
aria-haspopup="true"
>
<i class="fas fa-bars"></i>
</button>
<!-- Toggler -->
// Initialization for ES Users
import { Sidenav, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Sidenav, Ripple });
Sidenav - API
Import
Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must
first import the component and then initialize it with the initMDB method. If you are going to use the UMD format,
just import the mdb-ui-kit package.
import { Sidenav, initMDB } from "mdb-ui-kit";
initMDB({ Sidenav });
import 'mdb-ui-kit';
Usage
Via data attributes
Using the Sidenav component doesn't require any additional JavaScript code - simply add
data-mdb-sidenav-init attribute to
element with .sidenav class
and use other data attributes to set all options.
For ES format, you must first import and call the initMDB method.
<nav data-mdb-sidenav-init class="sidenav" id="sidenav" data-mdb-color="secondary">
<!-- ... -->
</nav>
<button type="button" data-mdb-toggle="sidenav" data-mdb-target="#sidenav">
Toggle sidenav
</button>
Via JavaScript
const sidenavInstance = new Sidenav(document.getElementById('sidenav'));
const sidenavInstance = new mdb.Sidenav(document.getElementById('sidenav'));
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$(document).ready(() => {
$('#sidenav').sidenav('update', { color: 'warning'})
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-, as in data-mdb-backdrop-class="".
| Name | Type | Default | Description |
|---|---|---|---|
accordion
|
Boolean | false |
Enables accordion behavior in a navigation container |
backdrop
|
Boolean | true |
Adds/removes a backdrop in an over mode |
backdropClass
|
String | null | null |
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 | null | null |
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 |
focusTrap
|
Boolean | true |
Determines whether focus is trapped within the sidenav on open in over mode |
hidden
|
Boolean | true |
Initializes navigation outside a viewport |
mode |
String | over |
Sets position mode - available options: over, side, push |
scrollContainer
|
String | null | null |
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 | 77 |
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()
|
getInstance
|
Static method which allows you to get the sidenav instance associated to a DOM element. |
Sidenav.getInstance(sidenav)
|
getOrCreateInstance
|
Static method which returns the sidenav instance associated to a DOM element or create a new one in case it wasn't initialized. |
Sidenav.getOrCreateInstance(sidenav)
|
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 Sidenav(sidenav)
sidenavInstance.show()
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);
});
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-collapse-sidenav-link-padding-left: #{$sidenav-collapse-sidenav-link-padding-left};
--#{$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-color: #{$sidenav-link-hover-color};
--#{$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-link-active-focus-color: #{$sidenav-link-active-focus-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};
// .sidenav-slim
--#{$prefix}sidenav-slim-link-padding-left: #{$sidenav-slim-link-padding-left};
SCSS variables
$sidenav-zindex: 1035;
$sidenav-backdrop-zindex: 1034;
$sidenav-transform: translateX(-100%);
$sidenav-color: var(--#{$prefix}surface-color);
$sidenav-background-color: var(--#{$prefix}surface-bg);
$sidenav-width: 240px;
$sidenav-height: 100vh;
$sidenav-box-shadow: 0 4px 12px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
0 2px 4px rgba(var(--#{$prefix}box-shadow-color-rgb), 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: 3.4rem;
$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: inherit;
$sidenav-link-hover-background-color: var(--#{$prefix}highlight-bg-color);
$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, var(--#{$prefix}sidenav-backdrop-opacity));
$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;
$sidenav-slim-link-padding-left: 1rem;