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>

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" tabindex="0" mdbRipple>
          <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" tabindex="0" mdbRipple>
          <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" tabindex="0" mdbRipple>
          <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" tabindex="0" mdbRipple>
          <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" tabindex="0" mdbRipple>
          <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" tabindex="0" mdbRipple>
          <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" tabindex="0" mdbRipple>
          <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" tabindex="0" mdbRipple>
          <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" tabindex="0" mdbRipple
          ><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" 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" tabindex="0" mdbRipple
          ><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" 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
          ><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" 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
          ><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" 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" (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. Just add mdbSidenavMenu directive to each menu element. 

<mdb-sidenav-layout>
  <mdb-sidenav
    #sidenav
    id="sidenav"
    [accordion]="true"
  >
    <ul class="sidenav-menu" mdbSidenavMenu>
      <mdb-sidenav-item>
        <a class="sidenav-link" href="/navigation/sidenav1">
          <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"
          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" href="/navigation/sidenav">Link 2</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" href="/navigation/sidenav3">Link 3</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a
          class="sidenav-link"
          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" href="/navigation/sidenav4">Link 4</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" href="/navigation/sidenav5">Link 5</a>
          </li>
        </ul>
      </mdb-sidenav-item>
    </ul>
    <hr />
    <ul class="sidenav-menu" mdbSidenavMenu>
      <mdb-sidenav-item>
        <a class="sidenav-link" href="/navigation/sidenav1">
          <i class="far fa-smile fa-fw me-3"></i><span>Link 6</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a
          class="sidenav-link"
          tabindex="0"
          role="button"
          [attr.aria-expanded]="!category3.collapsed"
          aria-controls="category3"
          ><i class="fas fa-grin 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" href="/navigation/sidenav">Link 7</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" href="/navigation/sidenav3">Link 8</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a
          class="sidenav-link"
          tabindex="0"
          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" href="/navigation/sidenav4">Link 9</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" href="/navigation/sidenav5">Link 10</a>
          </li>
        </ul>
      </mdb-sidenav-item>
    </ul>
  </mdb-sidenav>
  <mdb-sidenav-content>
    <div class="mt-5 d-flex justify-content-center">
      <!-- Toggler -->
      <button
        class="btn btn-primary"
        aria-label="toggle"
        aria-controls="sidenav"
        (click)="sidenav.toggle()"
      >
        <i class="fas fa-bars"></i>
      </button>
      <!-- Toggler -->
    </div>
  </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-->

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 
<!-- Sidenav -->
<mdb-sidenav-layout>
  <mdb-sidenav #sidenav="mdbSidenav">
    <div class="mt-4">
      <div id="header-content" class="ps-3">
        <img
          src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(26).webp"
          alt="Avatar"
          class="rounded-circle img-fluid mb-3"
          style="max-width: 50px"
        />
        <h4>Ann Smith</h4>
        <p>ann_s@mdbootstrap.com</p>
      </div>
      <hr class="mb-0" />
    </div>
    <ul class="sidenav-menu">
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" href="/" mdbRipple>
          <i class="fas fa-envelope fa-fw me-3"></i><span>Inbox</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple>
          <i class="fas fa-paper-plane fa-fw me-3"></i><span>Outbox</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple
          ><i class="fas fa-address-book fa-fw me-3"></i><span>Contacts</span></a
        >
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Family</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Friends</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Work</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-file fa-fw me-3"></i><span>Drafts</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-heart fa-fw me-3"></i><span>Favourites</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-star fa-fw me-3"></i><span>Starred</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-trash fa-fw me-3"></i><span>Trash</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-ban fa-fw me-3"></i><span>Spam</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple><i class="fas fa-tag fa-fw me-3"></i><span>Categories</span></a>
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Social</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Notifications</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Recent</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Uploads</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Backups</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Offers</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-sticky-note fa-fw me-3"></i><span>Notes</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple>
          <i class="fas fa-user-circle fa-fw me-3"></i><span>Personal</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-ellipsis-h fa-fw me-3"></i><span>More</span></a>
      </mdb-sidenav-item>
      <hr class="m-0" />
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-cogs fa-fw me-3"></i><span>Settings</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-user fa-fw me-3"></i><span>Profile</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple>
          <i class="fas fa-shield-alt fa-fw me-3"></i><span>Privacy</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple>
          <i class="fas fa-user-astronaut fa-fw me-3"></i><span>Log out</span></a
        >
      </mdb-sidenav-item>
    </ul>
    <div class="text-center" style="height: 100px">
      <hr class="mb-4 mt-0" />
      <p>MDBootstrap.com</p>
    </div>
  </mdb-sidenav>
  <mdb-sidenav-content #sidenavContent>
    <div class="mdb-page-content text-center page-intro bg-light">
      <div class="mask text-center py-5">
        <!-- Toggler -->
        <button class="btn btn-primary m-5" (click)="sidenav.toggle()">
          <i class="fas fa-bars"></i>
        </button>
        <!-- Toggler -->
        <div>
          <img class="rounded" src="https://mdbcdn.b-cdn.net/img/Photos/Others/img%20(45).webp" />
        </div>
      </div>
    </div>
  </mdb-sidenav-content>
</mdb-sidenav-layout>
<!-- Sidenav -->
.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 
<!-- Sidenav -->
<mdb-sidenav-layout>
  <mdb-sidenav
    #sidenav="mdbSidenav"
    scrollContainer="#container"
    [color]="'dark'"
    [mode]="mode"
    [hidden]="hidden"
  >
    <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>Ann Smith</h4>
        <p>ann_s@mdbootstrap.com</p>
      </div>
      <hr class="mb-0" />
    </div>
    <ul class="sidenav-menu" id="container" mdbScrollbar>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple href="/">
          <i class="fas fa-envelope fa-fw me-3"></i><span>Inbox</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple>
          <i class="fas fa-paper-plane fa-fw me-3"></i><span>Outbox</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple
          ><i class="fas fa-address-book fa-fw me-3"></i><span>Contacts</span></a
        >
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Family</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Friends</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Work</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-file fa-fw me-3"></i><span>Drafts</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-heart fa-fw me-3"></i><span>Favourites</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-star fa-fw me-3"></i><span>Starred</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-trash fa-fw me-3"></i><span>Trash</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-ban fa-fw me-3"></i><span>Spam</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple><i class="fas fa-tag fa-fw me-3"></i><span>Categories</span></a>
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Social</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Notifications</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Recent</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Uploads</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Backups</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Offers</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-sticky-note fa-fw me-3"></i><span>Notes</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple>
          <i class="fas fa-user-circle fa-fw me-3"></i><span>Personal</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-ellipsis-h fa-fw me-3"></i><span>More</span></a>
      </mdb-sidenav-item>
      <hr class="m-0" />
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-cogs fa-fw me-3"></i><span>Settings</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple> <i class="fas fa-user fa-fw me-3"></i><span>Profile</span></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple>
          <i class="fas fa-shield-alt fa-fw me-3"></i><span>Privacy</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple>
          <i class="fas fa-user-astronaut fa-fw me-3"></i><span>Log out</span></a
        >
      </mdb-sidenav-item>
    </ul>
    <div class="text-center" style="height: 100px">
      <hr class="mb-4 mt-0" />
      <p>MDBootstrap.com</p>
    </div>
  </mdb-sidenav>
  <mdb-sidenav-content #sidenavContent>
    <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>
        <!-- Toggler -->
        <button id="toggler" class="btn btn-dark mt-5" (click)="sidenav.toggle()">
          <i class="fas fa-bars"></i>
        </button>
        <!-- Toggler -->
      </div>
    </div>
  </mdb-sidenav-content>
</mdb-sidenav-layout>
<!-- Sidenav -->
import { AfterViewInit, Component, NgZone, ViewChild } from '@angular/core';
import { MdbSidenavComponent } from 'mdb-angular-ui-kit/sidenav/sidenav.component';
import { fromEvent } from 'rxjs';

@Component({
  selector: 'app-mode-transition-sidenav',
  templateUrl: './mode-transition-sidenav.component.html',
  styleUrls: ['./mode-transition-sidenav.component.scss'],
})
export class ModeTransitionSidenavComponent implements AfterViewInit {
  @ViewChild('sidenav', { static: true }) sidenav!: MdbSidenavComponent;

  mode = window.innerWidth >= 660 ? 'side' : 'over';
  hidden = window.innerWidth >= 660 ? false : true;

  constructor(private ngZone: NgZone) {}

  ngAfterViewInit() {
    this.ngZone.runOutsideAngular(() => {
      fromEvent(window, 'resize').subscribe(() => {
        if (window.innerWidth < 660 && this.mode !== 'over') {
          this.ngZone.run(() => {
            this.mode = 'over';
            this.hideSidenav();
          });
        } else if (window.innerWidth >= 660 && this.mode !== 'side') {
          this.ngZone.run(() => {
            this.mode = 'side';
            this.showSidenav();
          });
        }
      });
    });
  }

  hideSidenav() {
    setTimeout(() => {
      this.sidenav.hide();
    }, 0);
  }

  showSidenav() {
    setTimeout(() => {
      this.sidenav.show();
    });
  }
}
.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;
  }
}

3. Slim side navigation (dark)

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

View full screen demo 
<!-- Sidenav -->
<mdb-sidenav-layout>
  <mdb-sidenav
    #sidenav="mdbSidenav"
    [color]="'light'"
    [mode]="'side'"
    [slimCollapsed]="true"
    [slimWidth]="90"
    [hidden]="false"
  >
    <div class="text-center py-4 bg-dark">
      <a class="ripple rounded-circle" tabindex="0" mdbRipple>
        <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>
      <hr />
    </div>
    <ul class="sidenav-menu bg-dark" style="height: 100vh">
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 d-flex justify-content-center" tabindex="0" mdbRipple>
          <i class="far fa-heart fa-2x"></i
        ></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 my-3 d-flex justify-content-center" tabindex="0" mdbRipple>
          <i class="far fa-envelope fa-2x"></i
        ></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 my-3 d-flex justify-content-center" tabindex="0" mdbRipple>
          <i class="far fa-user fa-2x"></i
        ></a>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 my-3 d-flex justify-content-center" tabindex="0" mdbRipple>
          <i class="fa fa-cogs fa-2x"></i
        ></a>
      </mdb-sidenav-item>
    </ul>
  </mdb-sidenav>
  <mdb-sidenav-content #sidenavContent>
    <div class="page-intro">
      <div class="mask p-4 text-center">
        <h1>Natalie Smith</h1>
        <h2>Portfolio</h2>
      </div>
    </div>
  </mdb-sidenav-content>
</mdb-sidenav-layout>
<!-- Sidenav -->
.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;
  height: 100vh;
}

.mask {
  background-color: rgba(66, 66, 66, 0.4);
  width: 100vw;
  height: 100vh;
  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;
  }
}

4. MDB Navigation

Navigation template based on MDB documentation with the following settings:

  • Hidden on screens smaller then 1400px
  • padding-left: 240px added via CSS to the header and main on the screens larger then 1400px to push the content out of the sidenav area
  • Sidenav toggler added to the Navbar and hidden on screen larger then 1400px
  • On screens smaller then 1400px sidenav mode changes from side to over.
View full screen demo 
<mdb-sidenav-layout>
  <mdb-sidenav #sidenav="mdbSidenav" [mode]="mode" [position]="'fixed'" [hidden]="hidden">
    <a
      class="d-flex justify-content-center py-4"
      href="#!"
      mdbRipple
      rippleColor="primary"
      style="min-width: 240px"
    >
      <img
        id="MDB-logo"
        src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
        alt="MDB Logo"
        draggable="false"
      />
    </a>
    <ul class="sidenav-menu">
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple href="">
          <i class="fas fa-chart-area fa-fw me-3"></i><span>Webiste traffic</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple><i class="fas fa-cogs fa-fw me-3"></i><span>Settings</span></a>
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Profile</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Account</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" mdbRipple><i class="fas fa-cogs fa-fw me-3"></i><span>Password</span></a>
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Request password</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" tabindex="0" mdbRipple>Reset password</a>
          </li>
        </ul>
      </mdb-sidenav-item>
    </ul>
  </mdb-sidenav>
  <mdb-sidenav-content #sidenavContent>
    <!-- Navbar -->
    <nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
      <!-- Container wrapper -->
      <div class="container-fluid">
        <!-- Toggler -->
        <button
          class="btn shadow-0 p-0 me-3 d-block d-xxl-none"
          aria-controls="#sidenav-1"
          aria-haspopup="true"
          (click)="sidenav.toggle()"
        >
          <i class="fas fa-bars fa-lg"></i>
        </button>

        <!-- Search form -->
        <form class="d-none d-md-flex input-group w-auto my-auto">
          <input
            autocomplete="off"
            type="search"
            class="form-control rounded"
            placeholder='Search (ctrl + "/" to focus)'
            style="min-width: 225px"
          />
          <span class="input-group-text border-0"><i class="fas fa-search"></i></span>
        </form>

        <!-- Right links -->
        <ul class="navbar-nav ms-auto d-flex flex-row">
          <!-- Notification dropdown -->
          <li mdbDropdown class="nav-item dropdown">
            <a
              mdbDropdownToggle
              class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
              id="navbarDropdownMenuLink"
              role="button"
              aria-expanded="false"
            >
              <i class="fas fa-bell"></i>
              <span class="badge rounded-pill badge-notification bg-danger">1</span>
            </a>
            <ul
              mdbDropdownMenu
              class="dropdown-menu dropdown-menu-end"
              aria-labelledby="navbarDropdownMenuLink"
            >
              <li><a class="dropdown-item">Some news</a></li>
              <li><a class="dropdown-item">Another news</a></li>
              <li>
                <a class="dropdown-item">Something else here</a>
              </li>
            </ul>
          </li>

          <!-- Icon -->
          <li class="nav-item">
            <a class="nav-link me-3 me-lg-0">
              <i class="fas fa-fill-drip"></i>
            </a>
          </li>
          <!-- Icon -->
          <li class="nav-item me-3 me-lg-0">
            <a class="nav-link">
              <i class="fab fa-github"></i>
            </a>
          </li>

          <!-- Icon dropdown -->
          <li mdbDropdown class="nav-item dropdown">
            <a
              mdbDropdownToggle
              class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
              id="navbarDropdown"
              role="button"
              aria-expanded="false"
            >
              <i class="united kingdom flag m-0"></i>
            </a>
            <ul
              mdbDropdownMenu
              class="dropdown-menu dropdown-menu-end"
              aria-labelledby="navbarDropdown"
            >
              <li>
                <a class="dropdown-item"
                  ><i class="united kingdom flag"></i>English
                  <i class="fa fa-check text-success ms-2"></i
                ></a>
              </li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li>
                <a class="dropdown-item"><i class="poland flag"></i>Polski</a>
              </li>
              <li>
                <a class="dropdown-item"><i class="china flag"></i>中文</a>
              </li>
              <li>
                <a class="dropdown-item"><i class="japan flag"></i>日本語</a>
              </li>
              <li>
                <a class="dropdown-item"><i class="germany flag"></i>Deutsch</a>
              </li>
              <li>
                <a class="dropdown-item"><i class="france flag"></i>Français</a>
              </li>
              <li>
                <a class="dropdown-item"><i class="spain flag"></i>Español</a>
              </li>
              <li>
                <a class="dropdown-item"><i class="russia flag"></i>Русский</a>
              </li>
              <li>
                <a class="dropdown-item"><i class="portugal flag"></i>Português</a>
              </li>
            </ul>
          </li>

          <!-- Avatar -->
          <li mdbDropdown class="nav-item dropdown">
            <a
              mdbDropdownToggle
              class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center"
              id="navbarDropdownMenuLink"
              role="button"
              aria-expanded="false"
            >
              <img
                src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
                class="rounded-circle"
                height="22"
                alt=""
                loading="lazy"
              />
            </a>
            <ul
              mdbDropdownMenu
              class="dropdown-menu dropdown-menu-end"
              aria-labelledby="navbarDropdownMenuLink"
            >
              <li><a class="dropdown-item">My profile</a></li>
              <li><a class="dropdown-item">Settings</a></li>
              <li><a class="dropdown-item">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- Container wrapper -->
    </nav>
    <!-- Navbar -->

    <main style="margin-top: 58px" class="pb-5">
      <router-outlet></router-outlet>
    </main>
  </mdb-sidenav-content>
</mdb-sidenav-layout>
import { Component, AfterViewInit, NgZone, ViewChild } from '@angular/core';
import { MdbSidenavComponent } from 'mdb-angular-ui-kit/sidenav';
import { fromEvent } from 'rxjs';

@Component({
  selector: 'app-full-mdb-sidenav',
  templateUrl: './full-mdb-sidenav.component.html',
  styleUrls: ['./full-mdb-sidenav.component.scss'],
})
export class FullMdbSidenavComponent implements AfterViewInit {
  @ViewChild('sidenav', { static: true }) sidenav!: MdbSidenavComponent;

  mode = window.innerWidth >= 1400 ? 'side' : 'over';
  hidden = window.innerWidth >= 1400 ? false : true;

  constructor(private ngZone: NgZone) {}

  ngAfterViewInit() {
    this.ngZone.runOutsideAngular(() => {
      fromEvent(window, 'resize').subscribe(() => {
        if (window.innerWidth < 1400 && this.mode !== 'over') {
          this.ngZone.run(() => {
            this.mode = 'over';
            this.hideSidenav();
          });
        } else if (window.innerWidth >= 1400 && this.mode !== 'side') {
          this.ngZone.run(() => {
            this.mode = 'side';
            this.showSidenav();
          });
        }
      });
    });
  }

  hideSidenav() {
    setTimeout(() => {
      this.sidenav.hide();
    }, 0);
  }

  showSidenav() {
    setTimeout(() => {
      this.sidenav.show();
    });
  }
}
@media (min-width: 1400px) {
  main,
  header,
  #main-navbar {
    padding-left: 240px;
  }
}

Sidenav small and with categories

<mdb-sidenav-layout>
  <mdb-sidenav
    #sidenav="mdbSidenav"
    position="absolute"
    [hidden]="false"
    class="sidenav-sm"
  >
    <a
      class="ripple 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">
      <ng-container *ngFor="let item of items">
        <mdb-sidenav-item [ngClass]="{'pt-3 d-block': item.subheading}">
          <span *ngIf="item.subheading" class="sidenav-subheading text-muted">{{ item.subheading }}</span>
          <a class="sidenav-link" tabindex="0" mdbRipple>
            <i class="fas {{item.icon}} fa-fw me-3"></i><span>{{ item.name }}</span>
          </a>
        </mdb-sidenav-item>
      </ng-container>
    </ul>
  </mdb-sidenav>
  <mdb-sidenav-content #sidenavContent>
    <div class="mt-5 d-flex justify-content-center">
      <!-- Toggler -->
      <button class="btn btn-primary" (click)="sidenav.toggle()">
        <i class="fas fa-bars"></i>
      </button>
      <!-- Toggler -->
    </div>
    <router-outlet></router-outlet>
  </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 {
  items = [
    { name: 'Overview', icon: 'fa-tachometer-alt' },
    { name: 'Project', icon: 'fa-plus ', subheading: 'Create' },
    { name: 'Database', icon: 'fa-plus ' },
    { name: 'Project', icon: 'fa-cubes ', subheading: 'Manage' },
    { name: 'Databases', icon: 'fa-database ' },
    { name: 'Custom domains', icon: 'fa-stream ' },
    { name: 'Repositories', icon: 'fa-code-branch' },
    { name: 'Team', icon: 'fa-users' },
    { name: 'Analytics', icon: 'fa-chart-pie', subheading: 'Maintain' },
    { name: 'Backups', icon: 'fa-sync' },
    { name: 'Security', icon: 'fa-shield-alt' },
    { name: 'Admin', icon: 'fa-money-bill', subheading: 'Billing' },
    { name: 'License', icon: 'fa-file-contract' },
    { name: 'Drag & drop builder', icon: 'fa-hand-pointer', subheading: 'Tools' },
    { name: 'Online code editor', icon: 'fa-code'},
    { name: 'SFTP', icon: 'fa-copy'},
    { name: 'Jenkins', icon: 'fa-jenkins'},
    { name: 'GitLab', icon: 'fa-gitlab'},
  ]
}

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<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). 
<mdb-sidenav-layout>
  <mdb-sidenav (sidenavShow)="consoleLogEvent('show')">
    <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 {
  consoleLogEvent(type: string): void {
    console.log(type);
  }
}

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;