- Plugins
- Dropdown
Plugins
Tailwind CSS Dropdown
A dropdown menu displays a list of actions and more with JavaScript dropdown plugin.
Installation
To get started, install Dropdown plugin via npm, else you can skip this step if you are already using Preline UI as a package.
npm i @preline/dropdown
Example
Wrap the dropdown's toggle (your button or link) and the dropdown menu within .relative
, or another element that declares position: relative;
. Dropdown can be triggered from <a>
or <button>
elements to better fit your potential needs.
<div class="hs-dropdown relative inline-flex">
<button id="hs-dropdown-basic" type="button" class="hs-dropdown-toggle py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
Actions
<svg class="hs-dropdown-open:rotate-180 w-4 h-4 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 w-56 hidden z-10 mt-2 min-w-[15rem] bg-white shadow-md rounded-lg p-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700" aria-labelledby="hs-dropdown-basic">
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700" href="#">
Newsletter
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700" href="#">
Purchases
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700" href="#">
Downloads
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700" href="#">
Team Account
</a>
</div>
</div>
Basic usage
Prefer to create your own style? Here is a completely unstylized example.
<div class="hs-dropdown relative inline-flex">
<button id="hs-dropdown-unstyled" type="button" class="hs-dropdown-toggle inline-flex justify-center items-center gap-x-2">
Actions
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 w-56 hidden z-10 mt-2 min-w-[15rem] bg-white" aria-labelledby="hs-dropdown-unstyled">
<a class="block" href="#">Newsletter</a>
<a class="block" href="#">Purchases</a>
<a class="block" href="#">Downloads</a>
<a class="block" href="#">Team Account</a>
</div>
</div>
Methods
The HSDropdown
object is contained within the global window
object
Open item (public method).
const dropdown = new HSDropdown(document.querySelector('#dropdown'));
const openBtn = document.querySelector('#open-btn');
openBtn.addEventListener('click', () => {
dropdown.open();
});
Open item (static method).
const openBtn = document.querySelector('#open-btn');
openBtn.addEventListener('click', () => {
HSDropdown.show('#dropdown');
});
Open item (mixed).
const { element } = HSDropdown.getInstance('#dropdown', true);
const openBtn = document.querySelector('#open-btn');
openBtn.addEventListener('click', () => {
element.show();
});
Events
Call any function on open
example.
const el = HSDropdown.getInstance('#dropdown');
el.on('open', (instance) => {...});
Demo examples
Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.