View component on Github This page on Github
Example 

<div
  x-data="{ 
    languages: ['english', 'swedish', 'korean', 'german', 'icelandic', 'japanese'],
    currentLanguage: '',
  }"
  class="flex justify-center"
>
  <template x-for="(language, index) in languages">
    <div
      x-text="language"
      @contextmenu.prevent="$dispatch('open-contextmenu', {id: 'contextMenuLanguages', data: { index, language, languages, $data }, $event })"
      class="mr-4 cursor-pointer border border-gray-300 p-2 hover:bg-gray-50 dark:border-neutral-700 dark:hover:bg-neutral-700"
      :class="{ 'ring-4 ring-primary-400': language === currentLanguage }"
    ></div>
  </template>
</div>

<div x-data="dropdownContext" id="contextMenuLanguages" data-role="menu">
  <div
    x-bind="menu"
    x-cloak
    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 outline-hidden"
  >
    <a
      x-bind="menuItem"
      x-text="'Set ' + contextData?.language"
      @click="contextData.$data.currentLanguage = contextData.language"
      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"
    >
      button
    </a>
    <a
      x-bind="menuItem"
      @click="contextData.languages.push('spanish')"
      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"
    >
      Add spanish
    </a>
    <a
      x-bind="menuItem"
      x-text="'Remove ' + contextData?.language"
      @click="contextData.languages.splice(contextData.index, 1)"
      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"
    >
    </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-context/dist/cdn.min.js"></script>

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

Props

data-auto-close
true Boolean

If true menu is closed after click 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 for all kinds of applications. If you are building something more well defined like a menu or listbox you can use this prop to automatically add aria attributes to the elements. Valid values are: menu, listbox and dialog.

Opening menu

To show the context menu simply dispatch the open-contextmenu event anywhere in your application. The event's data should be an object with the following properties:

  • id: the ID of the context menu to show
  • data: context data
  • $event: the native contextmenu event used to calculate the menu position

The context data is available in the contextData property in the menu template.

Example
Right click here.
Context menu 

<div
  x-data
  @contextmenu.prevent="$dispatch('open-contextmenu', {id: 'contextMenu', data: 'This is context data.', $event})"
  class="mx-auto flex h-[200px] w-[200px] items-center justify-center rounded-md border border-dashed border-gray-400 text-xl font-semibold dark:border-dark-500"
>
  Right click here.
</div>

<div x-data="dropdownContext" id="contextMenu">
  <div
    x-bind="menu"
    x-cloak
    class="z-50 w-[320px] rounded-md border border-gray-200 bg-white p-4 shadow-md outline-hidden dark:border-dark-700 dark:bg-dark-800 dark:text-text-300"
  >
    Context menu
    <div x-text="contextData"></div>
  </div>
</div>
Litewind-alpine 0.1.0
Components Documentation