Side Menu

Bootstrap 5 Side menu component

Responsive Side menu with Bootstrap 5.Side Menu is a navigation component providing a clear way for navigating complex websites with lots of pages.

If you need a more advanced Side Menu and more options, see our main SideNav documentation. This component is sometimes also referred to as Side Navbar, Sidebar or Drawer navigation.

Basic example

In the basic version, the side navigation menu 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.

Edit in sandbox 
        
            
                <!-- Sidenav -->
                <nav id="sidenav-1" data-mdb-sidenav-init 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-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1" data-mdb-ripple-init class="btn btn-primary"
                  aria-controls="#sidenav-1" aria-haspopup="true">
                  <i class="fas fa-bars"></i>
                </button>
                <!-- Toggler -->

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.
Edit in sandbox 
        
            

                <nav
                  data-mdb-sidenav-init class="sidenav"
                  data-mdb-mode="side"
                  data-mdb-content="#content"
                >
                  ...
                </nav>
                <nav id="content">...</nav>

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:

Edit in sandbox 
        
            

          <!-- Sidenav -->
          <nav
            data-mdb-sidenav-init class="sidenav"
            data-mdb-color="secondary"
          >
            ...
          </nav>
          <!-- Sidenav -->

Dark example

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

Edit in sandbox 
        
            

            <!-- Sidenav -->
            <nav
              data-mdb-sidenav-init class="sidenav"
              data-mdb-color="light"
              style="background-color: #2d2c2c"
            >
              ...
            </nav>
            <!-- Sidenav -->

Menu item scroll

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

Edit in sandbox 
        
            

          <!-- Sidenav -->
          <nav
            id="sidenav-8"
            data-mdb-sidenav-init 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-->

          
        
    
        
            
            .scroll-section {
              max-height: 100px;
              overflow-y: auto;
              margin-right: 10px;
            }
          
        
    
        
            
            const scrollSection = document.getElementsByClassName('scroll-section');

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