get started
theming
components
interactive
Displays a menu to the user—such as a set of actions or functions—triggered by a button.
<div>
<button data-dropdown-trigger data-dropdown-id="myDropdown" class="btn variant-outlined sz-md">
<span class="btn-label">Open Dropdown</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path>
</svg>
</button>
<ul role="menu" id="myDropdown" tabindex="-1" aria-labelledby="menubutton1" aria-activedescendant="mi1" class="bg-ui invisible fixed left-[--fx-popper-placement-x] top-[--fx-popper-placement-y] z-50 w-40 overflow-hidden rounded-[calc(var(--btn-radius)+0.25rem)] border p-1 shadow-lg data-[state=open]:visible data-[state=open]:opacity-100">
<li id="mi1" role="menuitem">
<a href="#" class="btn sz-md justify-start hover:bg-primary-600 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.751 2.751 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.75 2.75 0 0 1 .596-.892l7.262-7.261Z" clip-rule="evenodd"></path>
</svg>
Edit
</a>
</li>
<li id="mi2" role="menuitem">
<a href="#" class="btn sz-md justify-start hover:bg-primary-600 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
</svg>
Duplicate
</a>
</li>
<li class="mx-3.5 my-1">
<hr />
</li>
<li id="mi2" role="menuitem">
<a href="#" class="btn sz-md justify-start hover:bg-primary-600 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
<path d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z"></path>
<path d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z"></path>
</svg>
Download
</a>
</li>
<li id="mi3" role="menuitem">
<a href="#" class="btn sz-md justify-start hover:bg-primary-600 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path d="M3 2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z"></path>
<path fill-rule="evenodd" d="M3 6h10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm3 2.75A.75.75 0 0 1 6.75 8h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 6 8.75Z" clip-rule="evenodd"></path>
</svg>
Archive
</a>
</li>
<li id="mi2" role="menuitem">
<a href="#" class="btn sz-md justify-start hover:bg-primary-600 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path
fill-rule="evenodd"
d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
clip-rule="evenodd"></path>
</svg>
Delete
</a>
</li>
</ul>
</div>
Install flexilla dropdown using your package manager
npm install @flexilla/dropdown
Add your component’s config in a .js
or .ts
file
import { Dropdown } from '@flexilla/dropdown'
new Dropdown('#myDropdown', {
offsetDistance: 8,
placement: 'bottom-middle',
onShow: () => {
document.documentElement.classList.add('overflow-hidden')
},
onHide: () => {
document.documentElement.classList.remove('overflow-hidden')
},
})