Dropdown Menus
These dropdown menus start as accordion-style menus on small screens and become dropdown menus on large screens. Dropdowns widths can be specified with utility classes if necessary, and even be customized to be full-width mega menus.
Dropdown Menus
View Code
<div class="text-base dropdown-menu md:border md:border-gray-400 md:relative md:flex md:justify-center">
<div class="dropdown-menu-item js-dropdown-menu-item group">
<div class="flex items-center p-3 cursor-pointer js-dropdown-menu-trigger hover:text-brand-primary md:p-4 group-active:text-brand-primary">
<span class="flex-grow md:grow-0">Dropdown Menu</span>
<div class="js-dropdown-menu-item-icon md:ml-2" data-active-icon="fa-chevron-up" data-inactive-icon="fa-chevron-down">
<i class="fal fa-chevron-down"></i>
</div>
</div>
<div class="hidden pb-2 text-left dropdown-menu-content js-dropdown-menu-content z-menu md:absolute md:py-4 md:max-w-sm md:bg-white md:shadow-md md:mt-px">
<span class="block pt-4 tracking-wide text-gray-500 uppercase font-sans-demi text-sm-2 md:px-6 md:pr-12 md:pl-4 md:block md:mb-2">Menu Group Label</span>
<ul class="mb-0">
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
</ul>
<span class="block pt-4 tracking-wide text-gray-500 uppercase font-sans-demi text-sm-2 md:px-6 md:pr-12 md:pl-4 md:block md:mb-2">Menu Group Label</span>
<ul class="mb-0">
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
</ul>
</div>
</div>
<div class="dropdown-menu-item js-dropdown-menu-item">
<div class="flex items-center p-3 cursor-pointer js-dropdown-menu-trigger hover:text-brand-primary md:p-4">
<span class="flex-grow md:grow-0">Dropdown Menu</span>
<div class="js-dropdown-menu-item-icon md:ml-2" data-active-icon="fa-chevron-up" data-inactive-icon="fa-chevron-down">
<i class="fal fa-chevron-down"></i>
</div>
</div>
<div class="hidden pb-2 text-left dropdown-menu-content js-dropdown-menu-content z-menu md:absolute md:py-4 md:max-w-sm md:bg-white md:shadow-md md:mt-px">
<ul class="mb-0">
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
</ul>
</div>
</div>
</div>Dropdown Menus with Mega Menu
Note: The last column in the mega menu demonstrates how to flow the items into 2 columns. A height must be set on the parent container in order for the items to flow into multiple columns.
View Code
<div class="text-base dropdown-menu md:border md:border-gray-400 md:relative md:flex md:justify-center">
<div class="dropdown-menu-item js-dropdown-menu-item md:mx-6">
<div class="flex items-center py-3 cursor-pointer js-dropdown-menu-trigger hover:text-brand-primary md:py-4">
<span class="flex-grow md:grow-0">Dropdown Menu</span>
<div class="js-dropdown-menu-item-icon md:ml-2" data-active-icon="fa-chevron-up" data-inactive-icon="fa-chevron-down">
<i class="fal fa-chevron-down"></i>
</div>
</div>
<div class="hidden pb-2 text-left dropdown-menu-content js-dropdown-menu-content z-menu md:absolute md:py-4 md:max-w-sm md:bg-white md:shadow-md md:mt-px">
<span class="block pt-4 tracking-wide text-gray-500 uppercase font-sans-demi text-sm-2 md:px-6 md:pr-12 md:pl-4 md:block md:mb-2">Menu Group Label</span>
<ul class="mb-0">
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
</ul>
</div>
</div>
<div class="dropdown-menu-item js-dropdown-menu-item md:mx-6">
<div class="flex items-center py-3 cursor-pointer js-dropdown-menu-trigger hover:text-brand-primary md:py-4">
<span class="flex-grow md:grow-0">Mega Menu</span>
<div class="js-dropdown-menu-item-icon md:ml-2" data-active-icon="fa-chevron-up" data-inactive-icon="fa-chevron-down">
<i class="fal fa-chevron-down"></i>
</div>
</div>
<div class="hidden pb-2 text-left dropdown-menu-content js-dropdown-menu-content z-menu md:w-full md:absolute md:inset-x-0 md:p-8 md:bg-white md:shadow-md md:mt-px">
<div class="md:flex md:justify-center">
<div>
<span class="block pt-4 tracking-wide text-gray-500 uppercase font-sans-demi text-sm-2 md:px-6 md:pr-12 md:pl-4 md:block md:mb-2">Menu Group Label</span>
<ul class="mb-0">
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
</ul>
</div>
<div>
<span class="block pt-4 tracking-wide text-gray-500 uppercase font-sans-demi text-sm-2 md:px-6 md:pr-12 md:pl-4 md:block md:mb-2">Menu Group Label</span>
<ul class="mb-0">
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
</ul>
</div>
<div>
<span class="block pt-4 tracking-wide text-gray-500 uppercase font-sans-demi text-sm-2 md:px-6 md:pr-12 md:pl-4 md:block md:mb-2">Menu Group Label</span>
<ul class="mb-0">
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
<li>
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item</a>
</li>
</ul>
</div>
<div>
<span class="block pt-4 tracking-wide text-gray-500 uppercase font-sans-demi text-sm-2 md:px-6 md:pr-12 md:pl-4 md:block md:mb-2">Menu with items in 2 columns</span>
<ul class="mb-0 md:flex md:flex-wrap md:flex-col md:h-20">
<li class="flex-auto">
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item 1</a>
</li>
<li class="flex-auto">
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item 2</a>
</li>
<li class="flex-auto">
<a href="#" class="block py-2 text-black hover:text-brand-primary md:px-6 md:pr-12 md:pl-4">Menu Item 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>