Collapse menu

Bootstrap 5 Collapse menu component

Responsive collapse menu built with Bootstrap 5. Create a streamlined, user-friendly navigation with intuitive, responsive collapse menus for better user experience.

Basic example

Click the buttons below to show and hide another element via class changes:

  • .collapse hides content
  • .collapsing is applied during transitions
  • .collapse.show shows content

You can use a link with the href attribute, or a button with the data-mdb-target attribute. In both cases, the data-mdb-collapse-init is required.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Edit in sandbox 
        
            
            <!-- Buttons trigger collapse -->
            <a
              class="btn btn-primary mb-3"
              data-mdb-collapse-init
              data-mdb-ripple-init
              href="#collapseExample"
              role="button"
              aria-expanded="false"
              aria-controls="collapseExample"
            >
              Link with href
            </a>
            <button
              class="btn btn-primary mb-3"
              type="button"
              data-mdb-collapse-init
              data-mdb-ripple-init
              data-mdb-target="#collapseExample"
              aria-expanded="false"
              aria-controls="collapseExample"
            >
              Button with data-mdb-target
            </button>

            <!-- Collapsed content -->
            <div class="collapse" id="collapseExample">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
              squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
              sapiente ea proident.
            </div>
          
        
    
        
            
            // Initialization for ES Users
            import { Collapse, Ripple, initMDB } from 'mdb-ui-kit';

            initMDB({ Collapse, Ripple });

Sidenav example

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

Edit in sandbox 
        
            
          <!-- Sidenav-->
          <nav
            data-mdb-sidenav-init
            id="sidenav-1"
            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-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 });