Dropdown Menu

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>

Installation

1. Install the component

Install flexilla dropdown using your package manager

npm install @flexilla/dropdown

Configure your 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')
  },
})