Hambuger Menu Icon Using Tailwind UI
A Tailwind hamburger menu is a popular design style of a three horizontal lines icon used as a hidden navigation button, facilitated by the responsive utility classes of Tailwind CSS.
other
Loading component...
232 lines
<div class="flex flex-col justify-center items-center h-screen space-y-6">
<div class="flex flex-row space-x-4 items-center">
<button id="hamburgerButton1"
class="p-2 relative items-center bg-gray-900 justify-center mx-auto rounded-full w-[50px] h-[50px] border border-gray-700 text-white transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline hover:ring-blue-400 focus:ring-4">
<svg class="ml-1 w-6 h-6 transition-transform" id="hamburgerIcon1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z" fill="rgba(255,255,255,1)"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="ml-1 w-6 h-6 hidden transition-transform" id="xIcon1">
<path
d="M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</button>
<button id="hamburgerButton2"
class="p-2 relative items-center bg-gray-900 justify-center rounded-full w-[50px] h-[50px] border border-gray-700 text-white transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline hover:ring-blue-400 focus:ring-4">
<svg class="ml-1 w-6 h-6 transition-transform" id="hamburgerIcon2"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="rgba(255,255,255,1)"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="ml-1 w-6 h-6 hidden transition-transform" id="xIcon2">
<path
d="M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</button>
<button id="hamburgerButton3"
class="p-2 relative items-center bg-gray-900 justify-center rounded-full w-[50px] h-[50px] border border-gray-700 text-white transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline hover:ring-blue-400 focus:ring-4">
<svg class="ml-1 w-6 h-6 transition-transform" id="hamburgerIcon3"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 4H21V6H3V4ZM9 11H21V13H9V11ZM3 18H21V20H3V18Z" fill="rgba(255,255,255,1)"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="ml-1 w-6 h-6 hidden transition-transform" id="xIcon3">
<path
d="M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</button>
<button id="hamburgerButton4"
class="p-2 relative items-center bg-gray-900 justify-center rounded-full w-[50px] h-[50px] border border-gray-700 text-white transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline hover:ring-blue-400 focus:ring-4">
<svg class="ml-1 w-6 h-6 transition-transform" id="hamburgerIcon4"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M16 18V20H5V18H16ZM21 11V13H3V11H21ZM19 4V6H8V4H19Z" fill="rgba(255,255,255,1)"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="ml-1 w-6 h-6 hidden transition-transform" id="xIcon4">
<path
d="M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</button>
<button id="hamburgerButton5"
class="p-2 relative items-center bg-gray-900 justify-center rounded-full w-[50px] h-[50px] border border-gray-700 text-white transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline hover:ring-blue-400 focus:ring-4">
<svg class="ml-1 w-6 h-6 transition-transform" id="hamburgerIcon5"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M18 18V20H6V18H18ZM21 11V13H3V11H21ZM18 4V6H6V4H18Z" fill="rgba(255,255,255,1)"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="ml-1 w-6 h-6 hidden transition-transform" id="xIcon5">
<path
d="M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</button>
</div>
<div class="flex flex-row space-x-4 items-center">
<button id="hamburgerButton6"
class="p-2 relative items-center bg-gray-900 justify-center rounded-md w-[50px] h-[50px] border text-white transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline hover:ring-gray-400 focus:ring-4">
<svg class="ml-1 w-6 h-6 transition-transform" id="hamburgerIcon6"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="rgba(255,255,255,1)"></path>
</svg>
<svg class="ml-1 w-6 h-6 hidden transition-transform" id="xIcon6"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M11.9997 10.8284L7.04996 15.7782L5.63574 14.364L11.9997 8L18.3637 14.364L16.9495 15.7782L11.9997 10.8284Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</button>
<button id="hamburgerButton7"
class="p-2 relative items-center bg-gray-900 justify-center w-[50px] h-[50px] border text-white rounded-md transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline hover:ring-gray-400 focus:ring-4">
<svg class="ml-1 w-6 h-6 transition-transform" id="hamburgerIcon7"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="rgba(255,255,255,1)"></path>
</svg>
<svg class="ml-1 w-6 h-6 hidden transition-transform" id="xIcon7"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</button>
<button id="hamburgerButton8"
class="p-2 relative items-center bg-gray-900 justify-center w-[50px] h-[50px] border text-white rounded-md transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline hover:ring-gray-400 focus:ring-4">
<svg class="ml-1 w-6 h-6 transition-transform" id="hamburgerIcon8"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="rgba(255,255,255,1)"></path>
</svg>
<svg class="ml-1 w-6 h-6 hidden transition-transform" id="xIcon8"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</button>
<button id="hamburgerButton9"
class="p-2 relative items-center bg-gray-900 justify-center w-[50px] h-[50px] border text-white rounded-md transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline hover:ring-gray-400 focus:ring-4">
<svg class="ml-1 w-6 h-6 transition-transform" id="hamburgerIcon9"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="rgba(255,255,255,1)"></path>
</svg>
<svg class="ml-1 w-6 h-6 hidden transition-transform" id="xIcon9"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"
fill="rgba(255,255,255,1)"></path>
</svg>
</button>
</div>
<div class="flex flex-row space-x-4 items-center">
<button class="p-2 relative items-center justify-center w-[50px] h-[50px]">
<svg class="text-gray-900 hover:text-black w-8 h-8 transition-transform" fill="none"
stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5"></path>
</svg>
</button>
<button class="p-2 relative items-center justify-center w-[50px] h-[50px]">
<svg class="text-gray-900 hover:text-black w-8 h-8 transition-transform" fill="none"
stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"></path>
</svg>
</button>
<button class="p-2 relative items-center justify-center w-[50px] h-[50px]">
<svg class="text-gray-900 hover:text-black w-8 h-8 transition-transform" fill="none"
stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"></path>
</svg>
</button>
<button class="p-2 relative items-center justify-center w-[50px] h-[50px]">
<svg class="text-gray-900 hover:text-black w-8 h-8 transition-transform" fill="none"
stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5"></path>
</svg>
</button>
</div>
<div class="flex flex-row space-x-4 items-center">
<button class="p-2 relative items-center justify-center w-[50px] h-[50px]">
<svg class="text-gray-900 hover:text-black w-8 h-8 transition-transform" fill="none"
stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z">
</path>
</svg>
</button>
<button class="p-2 relative items-center justify-center w-[50px] h-[50px]">
<svg class="text-gray-900 hover:text-black w-8 h-8 transition-transform" fill="none"
stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z">
</path>
</svg>
</button>
</div>
</div>
<script>
function toggleIconAndTransition(hamburgerIcon, xIcon) {
if (hamburgerIcon.classList.contains("hidden")) {
hamburgerIcon.classList.remove("hidden", "rotate-90");
xIcon.classList.add("hidden", "rotate-0");
} else {
hamburgerIcon.classList.add("hidden", "rotate-90");
xIcon.classList.remove("hidden", "rotate-0");
}
}
const hamburgerButton1 = document.getElementById("hamburgerButton1");
const hamburgerIcon1 = document.getElementById("hamburgerIcon1");
const xIcon1 = document.getElementById("xIcon1");
const hamburgerButton2 = document.getElementById("hamburgerButton2");
const hamburgerIcon2 = document.getElementById("hamburgerIcon2");
const xIcon2 = document.getElementById("xIcon2");
const hamburgerButton3 = document.getElementById("hamburgerButton3");
const hamburgerIcon3 = document.getElementById("hamburgerIcon3");
const xIcon3 = document.getElementById("xIcon3");
const hamburgerButton4 = document.getElementById("hamburgerButton4");
const hamburgerIcon4 = document.getElementById("hamburgerIcon4");
const xIcon4 = document.getElementById("xIcon4");
const hamburgerButton5 = document.getElementById("hamburgerButton5");
const hamburgerIcon5 = document.getElementById("hamburgerIcon5");
const xIcon5 = document.getElementById("xIcon5");
const hamburgerButton6 = document.getElementById("hamburgerButton6");
const hamburgerIcon6 = document.getElementById("hamburgerIcon6");
const xIcon6 = document.getElementById("xIcon6");
const hamburgerButton7 = document.getElementById("hamburgerButton7");
const hamburgerIcon7 = document.getElementById("hamburgerIcon7");
const xIcon7 = document.getElementById("xIcon7");
const hamburgerButton8 = document.getElementById("hamburgerButton8");
const hamburgerIcon8 = document.getElementById("hamburgerIcon8");
const xIcon8 = document.getElementById("xIcon8");
const hamburgerButton9 = document.getElementById("hamburgerButton9");
const hamburgerIcon9 = document.getElementById("hamburgerIcon9");
const xIcon9 = document.getElementById("xIcon9");
hamburgerButton1.addEventListener("click", () => toggleIconAndTransition(hamburgerIcon1, xIcon1));
hamburgerButton2.addEventListener("click", () => toggleIconAndTransition(hamburgerIcon2, xIcon2));
hamburgerButton3.addEventListener("click", () => toggleIconAndTransition(hamburgerIcon3, xIcon3));
hamburgerButton4.addEventListener("click", () => toggleIconAndTransition(hamburgerIcon4, xIcon4));
hamburgerButton5.addEventListener("click", () => toggleIconAndTransition(hamburgerIcon5, xIcon5));
hamburgerButton6.addEventListener("click", () => toggleIconAndTransition(hamburgerIcon6, xIcon6));
hamburgerButton7.addEventListener("click", () => toggleIconAndTransition(hamburgerIcon7, xIcon7));
hamburgerButton8.addEventListener("click", () => toggleIconAndTransition(hamburgerIcon8, xIcon8));
hamburgerButton9.addEventListener("click", () => toggleIconAndTransition(hamburgerIcon9, xIcon9));
</script>