Hamburger menu button with open/close animation

Open and close animation onclick
requires alpineJs

This tailwind example is contributed by Krishna Gudpalle, on 02-Aug-2022. Component is made with Tailwind v3.4. It is responsive.

Author Krishna Gudpalle

Tailwind v3.4 21.1k 13

Fork Fullscreen

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div class="min-h-screen bg-gray-100 flex flex-col justify-center">
    <div class="relative py-3 sm:max-w-xl mx-auto">
        <nav x-data="{ open: false }">
            <button class="w-14 h-14 relative focus:outline-none bg-teal-600 rounded" @click="open = !open">
                <div class="block w-5 absolute left-6 top-1/2   transform  -translate-x-1/2 -translate-y-1/2">
                    <span  class="block absolute h-0.5 w-7 text-white bg-current transform transition duration-500 ease-in-out" :class="{'rotate-45': open,' -translate-y-1.5': !open }"></span>
                    <span  class="block absolute  h-0.5 w-5 text-white bg-current   transform transition duration-500 ease-in-out" :class="{'opacity-0': open } "></span>
                    <span  class="block absolute  h-0.5 w-7 text-white bg-current transform  transition duration-500 ease-in-out" :class="{'-rotate-45': open, ' translate-y-1.5': !open}"></span>
                </div>
            </button>
        </nav>
    </div>
</div>

Related Examples

Menu button

Freja Jensen

3 years ago

17k
Hamburger menu button with hover effect

_Amar_

3 years ago

18.3k
MobileMenu
Mobile Menu + AlpineJs

Maxim

2 years ago

5.5k
Confirm and cancel buttons

Samuel Dawson

3 years ago

17k
Switch tabs button

gmer33

3 years ago

17.2k
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Livia Flores

3 years ago

26.4k
3D button with hover effect!

Laurits

3 years ago

19.1k
Back to top button

Rafferty Kim

3 years ago

15.8k
Tab Menu
Tab menu

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

7.1k
Border bottom button

Santos78

3 years ago

13.1k
Button group
Add active class to clicked button using JavaScript

TailwindFlex

3 years ago

11k
Button Dropdown
Drop down button with only tailwind css using focus

Shivam Vishwakarma

1 year ago

2.6k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.