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

Video tutorial

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.
View full screen demo

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

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. To customize this behaviour in a non-standard way, use a combination of media queries & update.mdb.sidenav event

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.
        
            
          <nav
            data-mdb-sidenav-init
            class="sidenav"
            data-mdb-mode="side"
            data-mdb-content="#content"
          >
            ...
          </nav>
          <nav id="content">...</nav>
        
        
    
        
            
          // Initialization for ES Users
          import { Sidenav, initMDB } from "mdb-ui-kit";
          
          initMDB({ Sidenav });
        
        
    

Colors example

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

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

Select color:

        
            
          <!-- Sidenav -->
          <nav
            data-mdb-sidenav-init
            class="sidenav"
            data-mdb-color="secondary"
          >
            ...
          </nav>
          <!-- Sidenav -->
        
        
    
        
            
          // 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 });
        
        
    

Menu item scroll

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

        
            
          <!-- Sidenav -->
          <nav
          data-mdb-sidenav-init
          id="sidenav-8"
          class="sidenav"
          data-scroll-container="#scroll-container2"
          data-mdb-mode="side"
        >
          <div class="text-center">
            <h3 class="py-4">Examples</h3>
            <hr class="m-0" />
          </div>
          <ul id="scroll-container2" class="sidenav-menu">
            <li class="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 scroll-section">
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 1</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 2</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 3</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 4</a>
                </li>
                <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>
            </li>
            <li class="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 scroll-section">
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 1</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 2</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 3</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 4</a>
                </li>
                <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>
            </li>
            <li class="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 scroll-section">
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 1</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 2</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 3</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 4</a>
                </li>
                <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>
            </li>
            <li class="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 scroll-section">
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 1</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 2</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 3</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 4</a>
                </li>
                <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>
            </li>
            <li class="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 scroll-section">
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 1</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 2</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 3</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 4</a>
                </li>
                <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>
            </li>
            <li class="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 scroll-section">
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 1</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 2</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 3</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 4</a>
                </li>
                <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>
            </li>
            <li class="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 scroll-section">
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 1</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 2</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 3</a>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link">Link 4</a>
                </li>
                <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>
            </li>
          </ul>

          <div class="text-center" style="min-height: 3rem">
            <hr class="mt-0 mb-2" />
            <small>mdbootstrap.com</small>
          </div>
        </nav>
          <!-- Sidenav-->

          <div style="padding: 20px;" class="text-center">
            <button
              data-mdb-toggle="sidenav"
              data-mdb-target="#sidenav-8"
              class="btn btn-primary"
              aria-controls="#sidenav-8"
              aria-haspopup="true"
            >
              <i class="fas fa-bars"></i>
            </button>
            <div class="d-flex justify-content-center my-5"></div>
          </div>
        
        
    
        
            
          .scroll-section {
            max-height: 100px;
            overflow-y: auto;
            margin-right: 10px;
          }
        
        
    
        
            
          // Initialization for ES Users
          import { Sidenav, PerfectScrollbar, initMDB } from "mdb-ui-kit";
          
          initMDB({ Sidenav });

          const scrollSection = document.getElementsByClassName('scroll-section');

          scrollSection.forEach((el) => {
            const ps = new PerfectScrollbar(el, { suppressScrollX: true });
          });
        
        
    
        
            
          const scrollSection = document.getElementsByClassName('scroll-section');

          scrollSection.forEach((el) => {
            const ps = new mdb.PerfectScrollbar(el, { suppressScrollX: true });
          });
        
        
    

Slim example

You can hide/show elements in the slim mode by setting data-mdb-slim attribute 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-->
          <nav
            data-mdb-sidenav-init
            id="sidenav-4"
            class="sidenav"
            data-mdb-mode="side"
            data-mdb-slim="true"
            data-mdb-slim-collapsed="true"
            data-mdb-content="#slim-content"
          >
            <ul class="sidenav-menu">
              <li class="sidenav-item">
                <a class="sidenav-link">
                  <i class="far fa-smile me-3"></i
                  ><span data-mdb-slim="false">Link 1</span></a
                >
              </li>
              <li class="sidenav-item">
                <a class="sidenav-link"
                  ><i class="fas fa-grin me-3"></i
                  ><span data-mdb-slim="false">Category 1</span></a
                >
                <ul class="sidenav-collapse">
                  <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 me-3"></i
                  ><span data-mdb-slim="false">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-->

          <!-- Togglers -->
          <div id="slim-content">
            <button
              data-mdb-ripple-init
              data-mdb-toggle="sidenav"
              data-mdb-target="#sidenav-4"
              class="btn btn-primary"
              aria-controls="#sidenav-4"
              aria-haspopup="true"
            >
              <i class="fas fa-bars"></i>
            </button>
            <button data-mdb-ripple-init id="slim-toggler" class="btn btn-primary">
              Toggle slim
            </button>
          </div>
          <!-- Togglers -->
        
        
    
        
            
          // Initialization for ES Users
          import { Sidenav, initMDB } from "mdb-ui-kit";
          
          initMDB({ Sidenav });

          //Use show() method to make it instantly visible
          const slimInstance = Sidenav.getInstance(document.getElementById('sidenav-4'));

          slimInstance.show();

          document.getElementById('slim-toggler').addEventListener('click', () => {
            slimInstance.toggleSlim();
          })
        
        
    
        
            
          //Use show() method to make it instantly visible
          const slimInstance = mdb.Sidenav.getInstance(document.getElementById('sidenav-4'));

          slimInstance.show();

          document.getElementById('slim-toggler').addEventListener('click', () => {
            slimInstance.toggleSlim();
          })
        
        
    

Accordion example

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

        
            
          <!-- Sidenav-->
          <nav
            data-mdb-sidenav-init
            id="sidenav-5"
            class="sidenav"
            data-mdb-accordion="true"
          >
            <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">
                  <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-toggle="sidenav"
              data-mdb-target="#sidenav-5"
              class="btn btn-primary"
              aria-controls="#sidenav-5"
              aria-haspopup="true"
            >
              <i class="fas fa-bars"></i>
            </button>
          <!-- Toggler -->
        
        
    
        
            
          // Initialization for ES Users
          import { Sidenav, initMDB } from "mdb-ui-kit";
          
          initMDB({ Sidenav });
        
        
    

Groups

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

        
            
          <!-- Sidenav-->
          <nav
            data-mdb-sidenav-init
            id="sidenav-6"
            class="sidenav"
            data-mdb-accordion="true"
            data-mdb-mode="side"
          >
            <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">
                  <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>
            <hr />
            <ul class="sidenav-menu">
              <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="fas fa-grin fa-fw me-3"></i><span>Category 3</span></a
                >
                <ul class="sidenav-collapse">
                  <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>
              </li>
              <li class="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">
                  <li class="sidenav-item">
                    <a class="sidenav-link">Link 9</a>
                  </li>
                  <li class="sidenav-item">
                    <a class="sidenav-link">Link 10</a>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>

          <!-- Sidenav-->

          <!-- Toggler -->
          <button
            data-mdb-toggle="sidenav"
            data-mdb-target="#sidenav-6"
            class="btn btn-primary"
            aria-controls="#sidenav-6"
            aria-haspopup="true"
          >
            <i class="fas fa-bars"></i>
          </button>
          <!-- Toggler -->
        
        
    
        
            
          // Initialization for ES Users
          import { Sidenav, initMDB } from "mdb-ui-kit";
          
          initMDB({ Sidenav });
        
        
    

Right

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

        
            
          <nav
            data-mdb-sidenav-init=""
            class="sidenav"
            data-mdb-right="true"
          >
            ...
          </nav>
        
        
    
        
            
          // 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.


1. Basic side navigation

Click the toggler to show the navigation (over mode).

        
            
            <!-- Sidenav -->
            <nav
              data-mdb-sidenav-init
              id="full-screen-example"
              class="sidenav"
            >
              <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>
              <div>
                <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" href="#test-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/1.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="mask text-center py-5">
                <button
                  data-mdb-ripple-init
                  id="toggler"
                  class="btn btn-primary m-5"
                  data-mdb-toggle="sidenav"
                  data-mdb-target="#full-screen-example"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div>
                  <img class="rounded" src="https://mdbcdn.b-cdn.net/img/Photos/Others/img%20(45).webp" />
                </div>
              </div>
            </div>
            <!-- Content -->
          
        
    
        
            
            .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%;
              }
            }
          
        
    
        
            
            // Initialization for ES Users
            import { Sidenav, initMDB } from "mdb-ui-kit";
            
            initMDB({ Sidenav });
          
        
    

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

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.
        
            
          <!--Main Navigation-->
          <header>
            <!-- Sidenav -->
            <nav
              data-mdb-sidenav-init
              id="sidenav-1"
              class="sidenav"
              data-mdb-hidden="false"
              data-mdb-accordion="true"
            >
              <a
                data-mdb-ripple-init
                class="d-flex justify-content-center py-4"
                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">
                <li class="sidenav-item">
                  <a class="sidenav-link" href="">
                    <i class="fas fa-chart-area fa-fw me-3"></i
                    ><span>Webiste traffic</span></a
                  >
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link"
                    ><i class="fas fa-cogs fa-fw me-3"></i><span>Settings</span></a
                  >
                  <ul class="sidenav-collapse">
                    <li class="sidenav-item">
                      <a class="sidenav-link">Profile</a>
                    </li>
                    <li class="sidenav-item">
                      <a class="sidenav-link">Account</a>
                    </li>
                  </ul>
                </li>
                <li class="sidenav-item">
                  <a class="sidenav-link"
                    ><i class="fas fa-lock fa-fw me-3"></i><span>Password</span></a
                  >
                  <ul class="sidenav-collapse">
                    <li class="sidenav-item">
                      <a class="sidenav-link">Request password</a>
                    </li>
                    <li class="sidenav-item">
                      <a class="sidenav-link">Reset password</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </nav>
            <!-- Sidenav -->

            <!-- Navbar -->
            <nav
              data-mdb-navbar-init
              id="main-navbar"
              class="navbar navbar-expand-lg navbar-light bg-white fixed-top"
            >
              <!-- Container wrapper -->
              <div class="container-fluid">
                <!-- Toggler -->
                <button
                  data-mdb-ripple-init
                  data-mdb-toggle="sidenav"
                  data-mdb-target="#sidenav-1"
                  class="btn shadow-0 p-0 me-3 d-block d-xxl-none"
                  aria-controls="#sidenav-1"
                  aria-haspopup="true"
                >
                  <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 class="nav-item dropdown">
                    <a
                      data-mdb-dropdown-init
                      class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
                      href="#"
                      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
                      class="dropdown-menu dropdown-menu-end"
                      aria-labelledby="navbarDropdownMenuLink"
                    >
                      <li><a class="dropdown-item" href="#">Some news</a></li>
                      <li><a class="dropdown-item" href="#">Another news</a></li>
                      <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>

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

                  <!-- Icon dropdown -->
                  <li class="nav-item dropdown">
                    <a
                      data-mdb-dropdown-init
                      class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
                      href="#"
                      id="navbarDropdown"
                      role="button"
                      aria-expanded="false"
                    >
                      <i class="flag-united-kingdom flag m-0"></i>
                    </a>
                    <ul
                      class="dropdown-menu dropdown-menu-end"
                      aria-labelledby="navbarDropdown"
                    >
                      <li>
                        <a class="dropdown-item" href="#"
                          ><i class="flag-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" href="#"
                          ><i class="flag-poland flag"></i>Polski</a
                        >
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"
                          ><i class="flag-china flag"></i>中文</a
                        >
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"
                          ><i class="flag-japan flag"></i>日本語</a
                        >
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"
                          ><i class="flag-germany flag"></i>Deutsch</a
                        >
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"
                          ><i class="flag-france flag"></i>Français</a
                        >
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"
                          ><i class="flag-spain flag"></i>Español</a
                        >
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"
                          ><i class="flag-russia flag"></i>Русский</a
                        >
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"
                          ><i class="flag-portugal flag"></i>Português</a
                        >
                      </li>
                    </ul>
                  </li>

                  <!-- Avatar -->
                  <li class="nav-item dropdown">
                    <a
                      data-mdb-dropdown-init
                      class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center"
                      href="#"
                      id="navbarDropdownMenuLink"
                      role="button"
                      aria-expanded="false"
                    >
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (31).webp"
                        class="rounded-circle"
                        height="22"
                        alt="Avatar"
                        loading="lazy"
                      />
                    </a>
                    <ul
                      class="dropdown-menu dropdown-menu-end"
                      aria-labelledby="navbarDropdownMenuLink"
                    >
                      <li><a class="dropdown-item" href="#">My profile</a></li>
                      <li><a class="dropdown-item" href="#">Settings</a></li>
                      <li><a class="dropdown-item" href="#">Logout</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
              <!-- Container wrapper -->
            </nav>
            <!-- Navbar -->
          </header>
          <!--Main Navigation-->

          <!--Main layout-->
          <main style="margin-top: 58px">
            <div class="container">

            </div>
          </main>
          <!--Main layout-->

          <!--Footer-->
          <footer></footer>
          <!--Footer-->
        
        
    
        
            
          @media (min-width: 1400px) {
            main,
            header,
            #main-navbar {
              padding-left: 240px;
            }
          }
        
        
    
        
            
          // Initialization for ES Users
          import { Sidenav, Dropdown, Navbar, initMDB } from "mdb-ui-kit";

          initMDB({ Sidenav, Dropdown, Navbar });

          const sidenav = document.getElementById("sidenav-1");
          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 < 1400) {
              sidenavInstance.changeMode("over");
              sidenavInstance.hide();
            } else {
              sidenavInstance.changeMode("side");
              sidenavInstance.show();
            }
          };

          setMode();

          // Event listeners
          window.addEventListener("resize", setMode);
        
        
    
        
            
          const sidenav = document.getElementById("sidenav-1");
          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 < 1400) {
              sidenavInstance.changeMode("over");
              sidenavInstance.hide();
            } else {
              sidenavInstance.changeMode("side");
              sidenavInstance.show();
            }
          };

          setMode();

          // Event listeners
          window.addEventListener("resize", setMode);
        
        
    

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 - Adds a custom class to a backdrop
closeOnEsc Boolean true Closes a side drawer on ESC key (only when toggler is visible)
color String primary Changes a color of active/hovered links and categories
content String Selector for a content to which a component will add paddings/margins in push/side modes
expandOnHover Boolean false Expands/collapses slim mode on mouseover / mouseleave
hidden Boolean true Initializes navigation outside a viewport
mode String over Sets position mode - available options: over, side, push
scrollContainer String Selector for a scrollable container inside a side drawer
slim Boolean false Enables a slim mode
slimCollapsed Boolean false Initializes a component in a slim mode
slimWidth Number 70 A component's width in a slim mode (pixels)
position String fixed Sets CSS position - accepted values: fixed, absolute
right Boolean false Initializes sidenav on a right side
transitionDuration Number 300 Sets a length of transitions (in milliseconds)
width Number 240 A component's width (pixels)

Methods

Name Description Example
changeMode Changes a position mode (options: over, side, push) sidenavInstance.changeMode('push')
dispose Removes mdb.Sidenav instance sidenavInstance.dispose()
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-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};

        // .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: $primary;
        $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;