Hamburger Menu

Bootstrap 5 Hamburger Menu

Responsive Hamburger menu with Bootstrap 5. Templates include hamburger menu on the left and on the right (RTL support), icon animations, sidenav, navbar & more.

Hamburger menu is a navigation type that serves the purpose of hiding some menu items & showing them on click. It stacks the items on top of each other in a "hamburger" fashion.


Basic example

Simple example of hamburger menu in a navbar.



                      <nav class="navbar navbar-light bg-light">
                        <div class="container-fluid">
                          <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
                            data-mdb-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-bars"></i>
                          </button>
                        </div>
                      </nav>
                      <div class="collapse" id="navbarToggleExternalContent">
                        <div class="bg-light shadow-3 p-4">
                          <button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                          <button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                          <button class="btn btn-link btn-block m-0">Link 3</button>
                        </div>
                      </div>




                    

Hamburger in Navbar

Explore advanced navbar options & customization in the Navbar Documentation.

Start

By default this hamburger menu will be displayed on the left side of a navbar.

MDB supports right-to-left so you can easily reverse text direction as well as this display of the navbar icon.

So this elemnt will have the hamburger menu at the start of a navbar - on left or right side depending on the text direction.



                      <nav class="navbar navbar-light bg-light">
                        <div class="container-fluid">
                          <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
                            data-mdb-target="#navbarToggleExternalContent2" aria-controls="navbarToggleExternalContent2"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-bars"></i>
                          </button>
                        </div>
                      </nav>
                      <div class="collapse" id="navbarToggleExternalContent2">
                        <div class="bg-light shadow-3 p-4">
                          <button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                          <button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                          <button class="btn btn-link btn-block m-0">Link 3</button>
                        </div>
                      </div>




                    

End

By default this hamburger menu will be displayed on the right side of a navbar.

You can easily push an element to the end of its parent by using the .ms-auto class which stands for margin start: auto.

Thanks to this approach this example also supports RTL text direction (so with RTL enabled it will display on the left side).



                      <nav class="navbar navbar-light bg-light">
                        <div class="container-fluid">
                          <button class="navbar-toggler ms-auto" type="button" data-mdb-toggle="collapse"
                            data-mdb-target="#navbarToggleExternalContent3" aria-controls="navbarToggleExternalContent3"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-bars"></i>
                          </button>
                        </div>
                      </nav>
                      <div class="collapse" id="navbarToggleExternalContent3">
                        <div class="bg-light shadow-3 p-4">
                          <button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                          <button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                          <button class="btn btn-link btn-block m-0">Link 3</button>
                        </div>
                      </div>




                    

Hamburger in Sidenav

Hamburger Button is a common way to toggle sidenav on mobile devices.

You can learn more about the sidebar component in the Side Navigation Documentation.

Start

Simple example of a sidebar hamburger menu with the side navigation element at the start of the viewport (on the left side by default).



                      <!-- Sidenav -->
                      <nav 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-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 -->




                    

End

Simple example of a sidebar hamburger menu with the side navigation element at the end of the viewport (on the left side by default).

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



                      <nav class="sidenav" data-mdb-right="true">
                        ...
                      </nav>




                    

Double navigation

Hamburger menu button is a great way to implement a responsive double navigation in your projects.

The side navigation will be hidden on smaller screens and reveal itself after a click on the hamburger button.

View full screen demo


                      <!--Main Navigation-->
                      <header>
                        <!-- Sidenav -->
                        <nav id="sidenav-1" class="sidenav" data-mdb-hidden="false" data-mdb-accordion="true">
                          <a class="ripple d-flex justify-content-center py-4" href="#!"
                            data-mdb-ripple-color="primary">
                            <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">
                            <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 id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
                          <!-- Container wrapper -->
                          <div class="container-fluid">
                            <!-- Toggler -->
                            <button 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 class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href="#"
                                  id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown"
                                  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 class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href="#"
                                  id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
                                  <i class="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="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="poland flag"></i>Polski</a>
                                  </li>
                                  <li>
                                    <a class="dropdown-item" href="#"><i class="china flag"></i>中文</a>
                                  </li>
                                  <li>
                                    <a class="dropdown-item" href="#"><i class="japan flag"></i>日本語</a>
                                  </li>
                                  <li>
                                    <a class="dropdown-item" href="#"><i class="germany flag"></i>Deutsch</a>
                                  </li>
                                  <li>
                                    <a class="dropdown-item" href="#"><i class="france flag"></i>Français</a>
                                  </li>
                                  <li>
                                    <a class="dropdown-item" href="#"><i class="spain flag"></i>Español</a>
                                  </li>
                                  <li>
                                    <a class="dropdown-item" href="#"><i class="russia flag"></i>Русский</a>
                                  </li>
                                  <li>
                                    <a class="dropdown-item" href="#"><i class="portugal flag"></i>Português</a>
                                  </li>
                                </ul>
                              </li>

                              <!-- Avatar -->
                              <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center" href="#"
                                  id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown"
                                  aria-expanded="false">
                                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
                                    class="rounded-circle" height="22" alt="" 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;
                      }
                      }
                    

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

Hamburger Icons

Examples of icon usage in Bootstrap Hamburger menu.

You will find even more icons in the Icons Documentation.

Custom icons

You can make any icon a hamburger menu toggler.



                        <!--Default icon-->
                        <section class="mb-3">
                          <nav class="navbar navbar-light bg-light">
                            <div class="container-fluid">
                              <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
                                data-mdb-target="#navbarToggleExternalContent4"
                                aria-controls="navbarToggleExternalContent4" aria-expanded="false"
                                aria-label="Toggle navigation">
                                <i class="fas fa-bars"></i>
                              </button>
                            </div>
                          </nav>
                          <div class="collapse" id="navbarToggleExternalContent4">
                            <div class="bg-light shadow-3 p-4">
                              <button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                              <button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                              <button class="btn btn-link btn-block m-0">Link 3</button>
                            </div>
                          </div>
                        </section>

                        <!--Hamburger icon-->
                        <section class="mb-3">
                          <nav class="navbar navbar-light bg-light">
                            <div class="container-fluid">
                              <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
                                data-mdb-target="#navbarToggleExternalContent5"
                                aria-controls="navbarToggleExternalContent5" aria-expanded="false"
                                aria-label="Toggle navigation">
                                <i class="fas fa-hamburger"></i>
                              </button>
                            </div>
                          </nav>
                          <div class="collapse" id="navbarToggleExternalContent5">
                            <div class="bg-light shadow-3 p-4">
                              <button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                              <button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                              <button class="btn btn-link btn-block m-0">Link 3</button>
                            </div>
                          </div>
                        </section>

                        <!--Chevron icon-->
                        <section class="mb-3">
                          <nav class="navbar navbar-light bg-light">
                            <div class="container-fluid">
                              <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
                                data-mdb-target="#navbarToggleExternalContent6"
                                aria-controls="navbarToggleExternalContent6" aria-expanded="false"
                                aria-label="Toggle navigation">
                                <i class="fas fa-chevron-circle-down"></i>
                              </button>
                            </div>
                          </nav>
                          <div class="collapse" id="navbarToggleExternalContent6">
                            <div class="bg-light shadow-3 p-4">
                              <button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                              <button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                              <button class="btn btn-link btn-block m-0">Link 3</button>
                            </div>
                          </div>
                        </section>

                        <!--Dots icon-->
                        <section class="mb-3">
                          <nav class="navbar navbar-light bg-light">
                            <div class="container-fluid">
                              <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
                                data-mdb-target="#navbarToggleExternalContent7"
                                aria-controls="navbarToggleExternalContent7" aria-expanded="false"
                                aria-label="Toggle navigation">
                                <i class="fas fa-ellipsis-h"></i>
                              </button>
                            </div>
                          </nav>
                          <div class="collapse" id="navbarToggleExternalContent7">
                            <div class="bg-light shadow-3 p-4">
                              <button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                              <button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                              <button class="btn btn-link btn-block m-0">Link 3</button>
                            </div>
                          </div>
                        </section>

                        <!--Compass icon-->
                        <section class="mb-3">
                          <nav class="navbar navbar-light bg-light">
                            <div class="container-fluid">
                              <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
                                data-mdb-target="#navbarToggleExternalContent8"
                                aria-controls="navbarToggleExternalContent8" aria-expanded="false"
                                aria-label="Toggle navigation">
                                <i class="fas fa-compass"></i>
                              </button>
                            </div>
                          </nav>
                          <div class="collapse" id="navbarToggleExternalContent8">
                            <div class="bg-light shadow-3 p-4">
                              <button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                              <button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                              <button class="btn btn-link btn-block m-0">Link 3</button>
                            </div>
                          </div>
                        </section>




                      

Animated icons

Animated hamburger menu icons add dynamism to your design.



                        <!--First button-->
                        <section class="mb-3">
                          <nav class="navbar navbar-light bg-light">
                            <div class="container-fluid">
                              <button class="navbar-toggler first-button" type="button" data-mdb-toggle="collapse"
                                data-mdb-target="#navbarToggleExternalContent9"
                                aria-controls="navbarToggleExternalContent9" aria-expanded="false"
                                aria-label="Toggle navigation">
                                <div class="animated-icon1"><span></span><span></span><span></span></div>
                              </button>
                            </div>
                          </nav>
                          <div class="collapse" id="navbarToggleExternalContent9">
                            <div class="bg-light shadow-3 p-4">
                              <button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                              <button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                              <button class="btn btn-link btn-block m-0">Link 3</button>
                            </div>
                          </div>
                        </section>

                        <!--Second button-->
                        <section class="mb-3">
                          <nav class="navbar navbar-dark bg-dark">
                            <div class="container-fluid">
                              <button class="navbar-toggler second-button" type="button" data-mdb-toggle="collapse"
                                data-mdb-target="#navbarToggleExternalContent10"
                                aria-controls="navbarToggleExternalContent10" aria-expanded="false"
                                aria-label="Toggle navigation">
                                <div class="animated-icon2"><span></span><span></span><span></span><span></span></div>
                              </button>
                            </div>
                          </nav>
                          <div class="collapse" id="navbarToggleExternalContent10">
                            <div class="bg-light shadow-3 p-4">
                              <button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                              <button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                              <button class="btn btn-link btn-block m-0">Link 3</button>
                            </div>
                          </div>
                        </section>

                        <!--Third button-->
                        <section class="mb-3">
                          <nav class="navbar navbar-info bg-info">
                            <div class="container-fluid">
                              <button class="navbar-toggler third-button" type="button" data-mdb-toggle="collapse"
                                data-mdb-target="#navbarToggleExternalContent11"
                                aria-controls="navbarToggleExternalContent11" aria-expanded="false"
                                aria-label="Toggle navigation">
                                <div class="animated-icon3"><span></span><span></span><span></span></div>
                              </button>
                            </div>
                          </nav>
                          <div class="collapse" id="navbarToggleExternalContent11">
                            <div class="bg-light shadow-3 p-4">
                              <button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                              <button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                              <button class="btn btn-link btn-block m-0">Link 3</button>
                            </div>
                          </div>
                        </section>

                      

                        /* Icon 1 */

                        .animated-icon1,
                        .animated-icon2,
                        .animated-icon3 {
                        width: 30px;
                        height: 20px;
                        position: relative;
                        margin: 0px;
                        -webkit-transform: rotate(0deg);
                        -moz-transform: rotate(0deg);
                        -o-transform: rotate(0deg);
                        transform: rotate(0deg);
                        -webkit-transition: .5s ease-in-out;
                        -moz-transition: .5s ease-in-out;
                        -o-transition: .5s ease-in-out;
                        transition: .5s ease-in-out;
                        cursor: pointer;
                        }

                        .animated-icon1 span,
                        .animated-icon2 span,
                        .animated-icon3 span {
                        display: block;
                        position: absolute;
                        height: 3px;
                        width: 100%;
                        border-radius: 9px;
                        opacity: 1;
                        left: 0;
                        -webkit-transform: rotate(0deg);
                        -moz-transform: rotate(0deg);
                        -o-transform: rotate(0deg);
                        transform: rotate(0deg);
                        -webkit-transition: .25s ease-in-out;
                        -moz-transition: .25s ease-in-out;
                        -o-transition: .25s ease-in-out;
                        transition: .25s ease-in-out;
                        }

                        .animated-icon1 span {
                        background: #2d7ef7;
                        }

                        .animated-icon2 span {
                        background: #e3f2fd;
                        }

                        .animated-icon3 span {
                        background: #f3e5f5;
                        }

                        .animated-icon1 span:nth-child(1) {
                        top: 0px;
                        }

                        .animated-icon1 span:nth-child(2) {
                        top: 10px;
                        }

                        .animated-icon1 span:nth-child(3) {
                        top: 20px;
                        }

                        .animated-icon1.open span:nth-child(1) {
                        top: 11px;
                        -webkit-transform: rotate(135deg);
                        -moz-transform: rotate(135deg);
                        -o-transform: rotate(135deg);
                        transform: rotate(135deg);
                        }

                        .animated-icon1.open span:nth-child(2) {
                        opacity: 0;
                        left: -60px;
                        }

                        .animated-icon1.open span:nth-child(3) {
                        top: 11px;
                        -webkit-transform: rotate(-135deg);
                        -moz-transform: rotate(-135deg);
                        -o-transform: rotate(-135deg);
                        transform: rotate(-135deg);
                        }

                        /* Icon 3*/

                        .animated-icon2 span:nth-child(1) {
                        top: 0px;
                        }

                        .animated-icon2 span:nth-child(2),
                        .animated-icon2 span:nth-child(3) {
                        top: 10px;
                        }

                        .animated-icon2 span:nth-child(4) {
                        top: 20px;
                        }

                        .animated-icon2.open span:nth-child(1) {
                        top: 11px;
                        width: 0%;
                        left: 50%;
                        }

                        .animated-icon2.open span:nth-child(2) {
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                        transform: rotate(45deg);
                        }

                        .animated-icon2.open span:nth-child(3) {
                        -webkit-transform: rotate(-45deg);
                        -moz-transform: rotate(-45deg);
                        -o-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                        }

                        .animated-icon2.open span:nth-child(4) {
                        top: 11px;
                        width: 0%;
                        left: 50%;
                        }

                        /* Icon 4 */

                        .animated-icon3 span:nth-child(1) {
                        top: 0px;
                        -webkit-transform-origin: left center;
                        -moz-transform-origin: left center;
                        -o-transform-origin: left center;
                        transform-origin: left center;
                        }

                        .animated-icon3 span:nth-child(2) {
                        top: 10px;
                        -webkit-transform-origin: left center;
                        -moz-transform-origin: left center;
                        -o-transform-origin: left center;
                        transform-origin: left center;
                        }

                        .animated-icon3 span:nth-child(3) {
                        top: 20px;
                        -webkit-transform-origin: left center;
                        -moz-transform-origin: left center;
                        -o-transform-origin: left center;
                        transform-origin: left center;
                        }

                        .animated-icon3.open span:nth-child(1) {
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                        transform: rotate(45deg);
                        top: 0px;
                        left: 8px;
                        }

                        .animated-icon3.open span:nth-child(2) {
                        width: 0%;
                        opacity: 0;
                        }

                        .animated-icon3.open span:nth-child(3) {
                        -webkit-transform: rotate(-45deg);
                        -moz-transform: rotate(-45deg);
                        -o-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                        top: 21px;
                        left: 8px;
                        }
                      

                        document.querySelector('.first-button').addEventListener('click', function () {

                        document.querySelector('.animated-icon1').classList.toggle('open');
                        });
                        document.querySelector('.second-button').addEventListener('click', function () {

                        document.querySelector('.animated-icon2').classList.toggle('open');
                        });
                        document.querySelector('.third-button').addEventListener('click', function () {

                        document.querySelector('.animated-icon3').classList.toggle('open');
                        });
                      

If you want to support our friends from Tailwind Elements you can check also check out the Tailwind Cards documentation.