View component on Github This page on Github
Example 

<div x-data="dropdown">
  <button
    x-bind="trigger"
    class="block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
  >
    Dropdown menu
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      viewBox="0 0 512 512"
      class="ml-2 h-4 w-4 rotate-180 transform duration-200"
      :class="{ 'rotate-0!': isOpen }"
    >
      <path
        d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
      />
    </svg>
  </button>
  <div
    x-bind="menu"
    x-cloak
    x-alt-transition='{
      "enter": ["opacity-0 scale-y-50", "transition ease-out duration-100 origin-top", "opacity-100"],
      "leave": ["opacity-100", "transition ease-in duration-100 origin-top", "opacity-0 scale-y-50"]
    }'
    class="border-gray-200 dark:border-dark-700 dark:bg-dark-800 dark:text-text-300 z-50 w-[300px] rounded-md border bg-white shadow-md px-2 py-1"
  >
    <a
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1"
    >
      Item
    </a>
    <a
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1"
    >
      Item 2
    </a>
    <a
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1"
    >
      Item 3
    </a>
  </div>
</div>

Usage

<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/plugins/use-floating/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/components/dropdown/dist/cdn.min.js"></script>

The data for the component is provided by the dropdown function in the x-data directive and the props in the data-* attributes. The dropdown also requires use-floating plugin that uses FloatingUI to calculate and update position of the menu.

Props

data-trigger-event
click String

Event that triggers dropdown. Valid values are click or hover.

data-auto-close
true Boolean

If true menu is closed after clicking on any element inside.

data-placement
bottom-start String

Initial placement of the dropdown content. This is a FloatingUI option, see documentation for examples and usage.

data-offset-x
0 Number

Offset of the dropdown relative to the reference element. This is a FloatingUI option, see documentation for examples and usage.

data-offset-y
0 Number

Offset of the dropdown relative to the reference element. This is a FloatingUI option, see documentation for examples and usage.

data-flip
false Boolean

Allows flipping of the dropdown to the opposite placement if it is outside the current view. This is a FloatingUI option, see documentation for examples and usage.

data-auto-placement
false Boolean

Automatically calculates the best placement for the floating element. This is a FloatingUI option, see documentation for examples and usage.

data-inline
false Boolean

Improves positioning for inline reference elements that span multiple lines. This is a FloatingUI option, see documentation for examples and usage.

data-role
empty string String

The dropdown is a generic component that can be used in a variety of applications. If you're building something more specific, such as a menu or listbox, you can use this prop to automatically apply the ARIA attributes. Valid values are menu, listbox and dialog. By default, if this prop is not set, only the ARIA attributes for expandable content are included.

To make dropdown menu open on hover set the data-trigger-event to 'hover'. In hover mode there is short delay before closing menu when the mouse leaves the trigger element.

Example 

<div x-data="dropdown" data-trigger-event="hover">
  <button
    x-bind="trigger"
    class="block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
  >
    Dropdown menu
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      viewBox="0 0 512 512"
      class="ml-2 h-4 w-4 rotate-180 transform duration-200"
      :class="{ 'rotate-0!': isOpen }"
    >
      <path
        d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
      />
    </svg>
  </button>
  <div
    x-bind="menu"
    x-cloak
    x-alt-transition='{
      "enter": ["opacity-0 scale-y-50", "transition ease-out duration-100 origin-top", "opacity-100"],
      "leave": ["opacity-100", "transition ease-in duration-100 origin-top", "opacity-0 scale-y-50"]
    }'
    class="border-gray-200 dark:border-dark-700 dark:bg-dark-800 dark:text-text-300 z-50 w-[300px] rounded-md border bg-white shadow-md px-2 py-1"
  >
    <a
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1"
    >
      Item
    </a>
    <a
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1"
    >
      Item 2
    </a>
    <a
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1"
    >
      Item 3
    </a>
  </div>
</div>

Dropdown is a generic component that can contain any type of content. To build a standard menu, add the data-role="menu" prop and x-bind="menuItem" to the menu item elements. These will set the required ARIA attributes and enable keyboard navigation.

Example 

<div x-data="dropdown" data-role="menu">
  <button
    x-bind="trigger"
    class="block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
  >
    Dropdown menu
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      viewBox="0 0 512 512"
      class="ml-2 h-4 w-4 rotate-180 transform duration-200"
      :class="{ 'rotate-0!': isOpen }"
    >
      <path
        d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
      />
    </svg>
  </button>
  <div
    x-bind="menu"
    x-cloak
    x-alt-transition='{
      "enter": ["opacity-0 scale-y-50", "transition ease-out duration-100 origin-top", "opacity-100"],
      "leave": ["opacity-100", "transition ease-in duration-100 origin-top", "opacity-0 scale-y-50"]
    }'
    class="border-gray-200 dark:border-dark-700 dark:bg-dark-800 dark:text-text-300 z-50 w-[300px] rounded-md border bg-white shadow-md px-2 py-1"
  >
    <a
      x-bind="menuItem"
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1 flex items-center gap-x-2"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4"
        fill="currentColor"
        viewBox="0 0 16 16"
      >
        <path
          d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"
        />
      </svg>
      Menu item
    </a>
    <a
      x-bind="menuItem"
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1 flex items-center gap-x-2"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4"
        fill="currentColor"
        viewBox="0 0 16 16"
      >
        <path
          d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"
        />
      </svg>
      Menu item
    </a>
    <hr class="border-gray-200 dark:border-dark-600 my-1" />
    <a
      x-bind="menuItem"
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1 flex items-center gap-x-2"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4"
        fill="currentColor"
        viewBox="0 0 16 16"
      >
        <path
          d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"
        />
      </svg>
      Menu item
    </a>
    <a
      x-bind="menuItem"
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1 flex items-center gap-x-2"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4"
        fill="currentColor"
        viewBox="0 0 16 16"
      >
        <path
          d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"
        />
      </svg>
      Menu item
    </a>
    <a
      x-bind="menuItem"
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1 flex items-center gap-x-2"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4"
        fill="currentColor"
        viewBox="0 0 16 16"
      >
        <path
          d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"
        />
      </svg>
      Menu item
    </a>
    <h6
      class="text-text-800/70 dark:text-text-300 w-full px-3 py-2 pr-4 text-left text-sm font-semibold"
    >
      Header
    </h6>
    <a
      x-bind="menuItem"
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1 flex items-center gap-x-2"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4"
        fill="currentColor"
        viewBox="0 0 16 16"
      >
        <path
          d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"
        />
      </svg>
      Menu item
    </a>
    <a
      x-bind="menuItem"
      href="#"
      class="text-text-800 hover:bg-secondary-100 focus:bg-primary-500 dark:text-text-300 dark:hover:bg-dark-700 dark:focus:bg-primary-500 my-1 block w-full px-4 py-2 text-left focus:text-white focus:outline-hidden dark:focus:text-white rounded-md my-1 flex items-center gap-x-2"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4"
        fill="currentColor"
        viewBox="0 0 16 16"
      >
        <path
          d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"
        />
      </svg>
      Menu item
    </a>
  </div>
</div>
Litewind-alpine 0.1.0
Components Documentation