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">
                <ul class="sidenav-menu">
                  <mdb-sidenav-item>
                    <a class="sidenav-link">
                      <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">
                      <i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span>
                    </a>
                    <ul class="sidenav-collapse" mdbCollapse>
                      <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>
                  </mdb-sidenav-item>
                  <mdb-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" mdbCollapse>
                      <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>
                  </mdb-sidenav-item>
                  <mdb-sidenav-item>
                    <a class="sidenav-link">
                      <i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 3</span>
                    </a>
                    <ul class="sidenav-collapse" mdbCollapse>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 5</a>
                      </li>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 6</a>
                      </li>
                    </ul>
                  </mdb-sidenav-item>
                  <mdb-sidenav-item>
                    <a class="sidenav-link">
                      <i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 4</span>
                    </a>
                    <ul class="sidenav-collapse" mdbCollapse>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 7</a>
                      </li>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 8</a>
                      </li>
                    </ul>
                  </mdb-sidenav-item>
                </ul>
              </mdb-sidenav>
              <mdb-sidenav-content #sidenavContent>
                <!-- Toggler -->
                <button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggle()">
                  <i class="fas fa-bars"></i>
                </button>
                <!-- Toggler -->
              </mdb-sidenav-content>
            </mdb-sidenav-layout>

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.

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. 
        
            
            <mdb-sidenav-layout>
              <mdb-sidenav #sidenav="mdbSidenav" [mode]="'side'">
                ...
              </mdb-sidenav>
              <mdb-sidenav-content #sidenavContent>
                ...
              </mdb-sidenav-content>
            </mdb-sidenav-layout>

Colors example

Setting the color option will change the background and font color of active/hovered links and categories.

Note: This option works for MDB 5 Angular main colors - primary, secondary, warning, danger, success, info, dark and light.

Select color:

        
            
          <!-- Sidenav -->
          <mdb-sidenav-layout>
            <mdb-sidenav #sidenav="mdbSidenav" [color]="'secondary'">
              ...
            </mdb-sidenav>
            <mdb-sidenav-content #sidenavContent>
              ...
            </mdb-sidenav-content>
          </mdb-sidenav-layout>
          <!-- Sidenav -->

Dark example

When using the darker background with the side navigation, we recommend setting the color attribute to "light" for better contrast. 

        
            
          <mdb-sidenav-layout>
            <mdb-sidenav #sidenav="mdbSidenav" [color]="'light'">
              <ul class="sidenav-menu" style="background-color: #2d2c2c; height: 100vh;">
                ...
              </ul>
            </mdb-sidenav>
            <mdb-sidenav-content #sidenavContent>
              ...
            </mdb-sidenav-content>
          </mdb-sidenav-layout>
          <!-- 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 component). 

        
            
            <!-- Sidenav -->
            <mdb-sidenav-layout>
              <mdb-sidenav #sidenav="mdbSidenav" [scrollContainer]="'#container'">
                <div class="text-center">
                  <h3 class="py-4">Examples</h3>
                  <hr class="m-0" />
                </div>
                <ul id="container" mdbScrollbar class="sidenav-menu" style="height: 300px;">
                  ...
                </ul>
                <div class="text-center" style="min-height: 3rem;">
                  <hr class="mt-0 mb-2" />
                  <small>mdbootstrap.com</small>
                </div>
              </mdb-sidenav>
              <mdb-sidenav-content #sidenavContent>
                ...
              </mdb-sidenav-content>
            </mdb-sidenav-layout>

Menu item scroll

You can use custom styles and our Scrollbar to add inner scroll for menu items. 

        
            
          <mdb-sidenav-layout>
            <mdb-sidenav
              #sidenav
              #sidenavMenuItemScroll="mdbSidenav"
              [scrollContainer]="'#container'"
            >
              <div class="text-center">
                <h3 class="py-4">Examples</h3>
                <hr class="m-0" />
              </div>
              <ul id="container" mdbScrollbar class="sidenav-menu">
                <mdb-sidenav-item>
                  <a class="sidenav-link">
                    <i class="fas fa-grin fa-fw me-3"></i>
                    <span>Scrolling Category 1</span>
                  </a>
                  <ul class="sidenav-collapse" mdbScrollbar mdbCollapse style="max-height: 100px">
                    ...
                  </ul>
                </mdb-sidenav-item>
                <mdb-sidenav-item>
                  <a class="sidenav-link">
                    <i class="fas fa-grin fa-fw me-3"></i>
                    <span>Scrolling Category 2</span>
                  </a>
                  <ul class="sidenav-collapse" mdbScrollbar mdbCollapse style="max-height: 100px">
                    ...
                  </ul>
                </mdb-sidenav-item>
                <mdb-sidenav-item>
                  <a class="sidenav-link">
                    <i class="fas fa-grin fa-fw me-3"></i>
                    <span>Scrolling Category 3</span>
                  </a>
                  <ul class="sidenav-collapse" mdbScrollbar mdbCollapse style="max-height: 100px">
                    ...
                  </ul>
                </mdb-sidenav-item>
                <mdb-sidenav-item>
                  <a class="sidenav-link">
                    <i class="fas fa-grin fa-fw me-3"></i>
                    <span>Scrolling Category 4</span>
                  </a>
                  <ul class="sidenav-collapse" mdbScrollbar mdbCollapse style="max-height: 100px">
                    ...
                  </ul>
                </mdb-sidenav-item>
                <mdb-sidenav-item>
                  <a class="sidenav-link">
                    <i class="fas fa-grin fa-fw me-3"></i>
                    <span>Scrolling Category 5</span>
                  </a>
                  <ul class="sidenav-collapse" mdbScrollbar mdbCollapse style="max-height: 100px">
                    ...
                  </ul>
                </mdb-sidenav-item>
                <mdb-sidenav-item>
                  <a class="sidenav-link">
                    <i class="fas fa-grin fa-fw me-3"></i>
                    <span>Scrolling Category 6</span>
                  </a>
                  <ul class="sidenav-collapse" mdbScrollbar mdbCollapse style="max-height: 100px">
                    ...
                  </ul>
                </mdb-sidenav-item>
                <mdb-sidenav-item>
                  <a class="sidenav-link">
                    <i class="fas fa-grin fa-fw me-3"></i>
                    <span>Scrolling Category 7</span>
                  </a>
                  <ul class="sidenav-collapse" mdbScrollbar mdbCollapse style="max-height: 100px">
                    ...
                  </ul>
                </mdb-sidenav-item>
              </ul>
            </mdb-sidenav>
            <mdb-sidenav-content #sidenavContent>
              ...
            </mdb-sidenav-content>
          </mdb-sidenav-layout>

Slim example

You can hide/show elements in the slim mode by setting slim option 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. 

        
            
            <!-- Sidenav -->
            <mdb-sidenav-layout>
              <mdb-sidenav #sidenav="mdbSidenav" [slim]="true" [slimCollapsed]="true" [mode]="'push'">
                <ul class="sidenav-menu">
                  <mdb-sidenav-item>
                    <a class="sidenav-link">
                      <i class="far fa-smile fa-fw me-3 pe-1"></i><span slim="false">Link 1</span></a
                    >
                  </mdb-sidenav-item>
                  <mdb-sidenav-item>
                    <a class="sidenav-link"
                      ><i class="fas fa-grin fa-fw me-3 pe-1"></i><span slim="false">Category 1</span></a
                    >
                    <ul class="sidenav-collapse" mdbCollapse>
                      <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>
                  </mdb-sidenav-item>
                  <mdb-sidenav-item>
                    <a class="sidenav-link"
                      ><i class="fas fa-grin-wink fa-fw me-3 pe-1"></i><span slim="false">Category 2</span></a
                    >
                    <ul class="sidenav-collapse" mdbCollapse>
                      <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>
                  </mdb-sidenav-item>
                  <mdb-sidenav-item>
                    <a class="sidenav-link"
                      ><i class="fas fa-grin-wink fa-fw me-3 pe-1"></i><span slim="false">Category 3</span></a
                    >
                    <ul class="sidenav-collapse" mdbCollapse>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 5</a>
                      </li>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 6</a>
                      </li>
                    </ul>
                  </mdb-sidenav-item>
                  <mdb-sidenav-item>
                    <a class="sidenav-link"
                      ><i class="fas fa-grin-wink fa-fw me-3 pe-1"></i><span slim="false">Category 4</span></a
                    >
                    <ul class="sidenav-collapse" mdbCollapse>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 7</a>
                      </li>
                      <li class="sidenav-item">
                        <a class="sidenav-link">Link 8</a>
                      </li>
                    </ul>
                  </mdb-sidenav-item>
                </ul>
              </mdb-sidenav>
              <mdb-sidenav-content #sidenavContent>
                <!-- Toggler -->
                <button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggle()">
                  <i class="fas fa-bars"></i>
                </button>
                <!-- Toggler -->
                <button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggleSlim()">
                  toggle slim
                </button>
              </mdb-sidenav-content>
            </mdb-sidenav-layout>

Accordion example

Using accordion option will allow expanding only one category at once.

        
            
            <mdb-sidenav-layout>
              <mdb-sidenav #sidenav="mdbSidenav" [accordion]="true">
                ...
              </mdb-sidenav>
              <mdb-sidenav-content #sidenavContent>
                ...
              </mdb-sidenav-content>
            </mdb-sidenav-layout>
            <!-- Sidenav-->

Groups

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

        
            
          <mdb-sidenav-layout>
            <mdb-sidenav #sidenav="mdbSidenav" [accordion]="true">
              <ul class="sidenav-menu">
                <mdb-sidenav-item>
                  ...
                </mdb-sidenav-item>
                <mdb-sidenav-item>
                  ...
                </mdb-sidenav-item>
                <mdb-sidenav-item>
                  ...
                </mdb-sidenav-item>
                <hr>
                <mdb-sidenav-item>
                  ...
                </mdb-sidenav-item>
                <mdb-sidenav-item>
                  ...
                </mdb-sidenav-item>
                <mdb-sidenav-item>
                  ...
                </mdb-sidenav-item>
              </ul>
            </mdb-sidenav>
            <mdb-sidenav-content #sidenavContent>
              ...
            </mdb-sidenav-content>
          </mdb-sidenav-layout>

Right

Place the navigation on the other side by setting the right option to true. 

        
            
            <mdb-sidenav-layout>
              <mdb-sidenav #sidenav="mdbSidenav" [right]="true">
                ...
              </mdb-sidenav>
              <mdb-sidenav-content #sidenavContent>
                ...
              </mdb-sidenav-content>
            </mdb-sidenav-layout>
            <!-- Sidenav-->

Sidenav - API

Import

        
            
          import { MdbSidenavModule } from 'mdb-angular-ui-kit/sidenav';
          …
          @NgModule ({
            ...
            imports: [MdbSidenavModule],
            ...
          })

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
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)

Outputs

Name Type Description
sidenavShow EventEmitter<any> Emitted when a component has been toggled
sidenavShown EventEmitter<any> Emitted once a component is shown (after transition)
sidenavHide EventEmitter<any> Emitted when a component has been toggled
sidenavHidden EventEmitter<any> Emitted once a component is hidden (after transition)
sidenavExpand EventEmitter<any> Emitted when a slim mode has been toggled
sidenavExpanded EventEmitter<any> Emitted once a component has expanded from a slim mode (after transition)
sidenavCollapse EventEmitter<any> Emitted when a slim mode has been toggled
sidenavCollapsed EventEmitter<any> Emitted once a component has collapsed into a slim mode (after transition)
sidenavUpdate EventEmitter<any> Emitted whenever a content's offset should be updated (push/side mode).

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()