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
Angular Bootstrap 5 Sidenav component
The side navigation component provides an easy way to navigate through your website.
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
TypeScript.
<mdb-sidenav-layout>
<mdb-sidenav #sidenav="mdbSidenav" id="sidenav1">
<ul class="sidenav-menu">
<mdb-sidenav-item>
<a class="sidenav-link" tabindex="0" mdbRipple>
<i class="far fa-smile fa-fw me-3"></i><span>Link 1</span>
</a>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a
class="sidenav-link"
tabindex="0" mdbRipple
role="button"
[attr.aria-expanded]="!category1.collapsed"
aria-controls="category1"
><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a
>
<ul class="sidenav-collapse" mdbCollapse id="category1" #category1="mdbCollapse">
<li class="sidenav-item">
<a class="sidenav-link" tabindex="0" mdbRipple>Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link" tabindex="0" mdbRipple>Link 3</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a
class="sidenav-link"
mdbRipple
tabindex="0"
role="button"
[attr.aria-expanded]="!category2.collapsed"
aria-controls="category2"
><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a
>
<ul class="sidenav-collapse" mdbCollapse id="category2" #category2="mdbCollapse">
<li class="sidenav-item">
<a class="sidenav-link" tabindex="0" mdbRipple>Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link" tabindex="0" mdbRipple>Link 5</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a
class="sidenav-link"
tabindex="0"
mdbRipple
role="button"
[attr.aria-expanded]="!category3.collapsed"
aria-controls="category3"
><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 3</span></a
>
<ul class="sidenav-collapse" mdbCollapse id="category3" #category3="mdbCollapse">
<li class="sidenav-item">
<a class="sidenav-link" tabindex="0" mdbRipple>Link 5</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link" tabindex="0" mdbRipple>Link 6</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a
class="sidenav-link"
tabindex="0"
mdbRipple
role="button"
[attr.aria-expanded]="!category4.collapsed"
aria-controls="category4"
><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 4</span></a
>
<ul class="sidenav-collapse" mdbCollapse id="category4" #category4="mdbCollapse">
<li class="sidenav-item">
<a class="sidenav-link" tabindex="0" mdbRipple>Link 7</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link" tabindex="0" mdbRipple>Link 8</a>
</li>
</ul>
</mdb-sidenav-item>
</ul>
</mdb-sidenav>
<mdb-sidenav-content #sidenavContent>
<!-- Toggler -->
<button
#sidenavToggle
class="btn btn-primary"
aria-label="toggle"
aria-controls="sidenav1"
(click)="sidenav.toggle()"
>
<i class="fas fa-bars"></i>
</button>
<!-- Toggler -->
</mdb-sidenav-content>
</mdb-sidenav-layout>
Sidenav - API
Import
import { MdbSidenavModule } from 'mdb-angular-ui-kit/sidenav';
import { MdbRippleModule } from 'mdb-angular-ui-kit/ripple';
import { MdbCollapseModule } from 'mdb-angular-ui-kit/collapse';
import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown'; // For examples with dropdown
…
@NgModule ({
...
imports: [MdbCollapseModule, MdbSidenavModule, MdbRippleModule, MdbDropdownModule],
...
})
Inputs
| 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 |
disableWindowScroll
|
Boolean | false |
Disables window scroll when sidenav is open. |
expandOnHover
|
Boolean | false |
Expands/collapses slim mode on mouseover / mouseleave |
focusTrap
|
Boolean | true |
Toggles focus trap feature in component template |
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 | 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) |
Outputs
| Name | Type | Description |
|---|---|---|
sidenavShow
|
EventEmitter<void> | Emitted when a component has been toggled |
sidenavShown
|
EventEmitter<void> | Emitted once a component is shown (after transition) |
sidenavHide
|
EventEmitter<void> | Emitted when a component has been toggled |
sidenavHidden
|
EventEmitter<void> | Emitted once a component is hidden (after transition) |
sidenavExpand
|
EventEmitter<void> | Emitted when a slim mode has been toggled |
sidenavExpanded
|
EventEmitter<void> | Emitted once a component has expanded from a slim mode (after transition) |
sidenavCollapse
|
EventEmitter<void> | Emitted when a slim mode has been toggled |
sidenavCollapsed
|
EventEmitter<void> | Emitted once a component has collapsed into a slim mode (after transition) |
sidenavUpdate
|
EventEmitter<void> | Emitted whenever a content's offset should be updated (push/side mode). |
<mdb-sidenav-layout>
<mdb-sidenav (sidenavShown)="onSidenavShown()">
<ul class="sidenav-menu">
...
</ul>
</mdb-sidenav>
<mdb-sidenav-content>
...
</mdb-sidenav-content>
</mdb-sidenav-layout>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
onSidenavShown(): void {
console.log('Sidenav shown');
}
}
Methods
| Name | Description | Example |
|---|---|---|
setMode
|
Changes a position mode (options: over, side, push) |
sidenav.setMode('push')
|
hide |
Hides a navigation drawer |
sidenav.hide()
|
show |
Shows a navigation drawer |
sidenav.show()
|
toggle |
Manually toggles a component |
sidenav.toggle()
|
toggleSlim
|
Manually toggles a slim state |
sidenav.toggleSlim()
|
<mdb-sidenav-layout>
<mdb-sidenav #sidenav>
<ul class="sidenav-menu">
...
</ul>
</mdb-sidenav>
<mdb-sidenav-content>
...
</mdb-sidenav-content>
</mdb-sidenav-layout>
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MdbSidenavComponent } from 'mdb-angular-ui-kit/sidenav';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
@ViewChild('sidenav') sidenav!: MdbSidenavComponent;
ngAfterViewInit(): void {
setTimeout(() => {
this.sidenav.show();
}, 2000);
}
}
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-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: 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: $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;