Popup Menu
Popup Menu
<div class="popup-menu relative md:max-w-sm" data-popup-menu="popup-menu-id-1">
<button class="js-popup-menu__toggle p-2 leading-none w-full flex items-center">
<i class="fal fa-user mr-2"></i>
<span class="text-left flex-grow">John Done</span>
<div class="px-4"><i class="fal fa-angle-down"></i></div>
</button>
<div class="popup-menu__content-container js-popup-menu__content-container absolute z-menu" id="popup-menu-id-1">
<div class="popup-menu__content rounded bg-white">
<div class="border-b border-gray-100 flex items-center leading-none">
<div class="font-sans-medium flex-grow px-6 py-4">My Account</div>
<a href="#" class="js-popup-menu-close text-base px-6 py-4 text-black"><i class="fal fa-times"></i></a>
</div>
<div class="popup-menu__content-body text-base py-4">
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Profile</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="">
<span class="flex-grow">Order History</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="">
<span class="flex-grow">Logout</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
</div>
</div>
</div>
</div>Hybrid Popup Menu
Hybrid Popup Menu will show as a full screen menu on small screens and a dropdown on large screens. Use utility classes to control the height of the .popup-menu__content container when on small screens.
For example: .h-full.overflow-hidden will allow the container to use the full height of the screen. If you want the content to dictate the height, don't use these classes.
<div class="popup-menu relative md:max-w-sm" data-popup-menu="popup-menu-id-2">
<button class="js-popup-menu__toggle p-2 leading-none w-full flex items-center">
<span class="text-left flex-grow">Hybrid Popup Menu</span>
<div class="px-4"><i class="fal fa-angle-down"></i></div>
</button>
<div class="popup-menu__content-container js-popup-menu__content-container absolute z-menu popup-menu--hybrid js-popup-menu--hybrid" id="popup-menu-id-2">
<div class="popup-menu__content rounded bg-white flex flex-col h-full overflow-hidden">
<div class="border-b border-gray-100 flex items-center leading-none">
<div class="font-sans-medium flex-grow px-6 py-4">Hybrid Popup Menu</div>
<a href="#" class="js-popup-menu-close text-base px-6 py-4"><i class="fal fa-times"></i></a>
</div>
<div class="popup-menu__content-body text-base py-4">
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
<a class="block px-6 py-1 flex items-center" href="" title="Email Address">
<span class="flex-grow">Menu Link</span>
<i class="fal fa-angle-right text-gray-600"></i>
</a>
</div>
</div>
</div>
</div>