Dropdown

Dropdown Component

The Dropdown component provides a flexible and accessible dropdown menu system composed of multiple subcomponents: the main container, trigger, items container, and individual dropdown items. It supports keyboard navigation, click and context menu triggers, customizable positioning, tooltips, and dark mode styling.

Example Usage

<x-dropdown :open="false">
  <x-dropdown.trigger openWithClick="both" tooltip="Open menu">
    <x-button>Open Dropdown</x-button>
  </x-dropdown.trigger>

  <x-dropdown.items position="top">
    <x-dropdown.item>Option 1</x-dropdown.item>
    <x-dropdown.item>Option 2</x-dropdown.item>
    <x-divider class="my-0" />
    <x-dropdown.item>Option 3</x-dropdown.item>
  </x-dropdown.items>
</x-dropdown>

Props

Dropdown (container)

• open (bool, default: false)
  Sets the initial open state of the dropdown menu.

Dropdown Trigger

• openWithClick (string, default: "left")
  Controls how the dropdown opens on mouse events.
  Options:

  • "left": toggle on left click
  • "right": open on right click (context menu) only
  • "both": toggle on left click and open on right click

• tooltip (string|null)
  Tooltip text shown when hovering over the trigger element.

Dropdown Items

• position (string, default: "bottom")
  Position of the dropdown menu relative to the trigger.
  Supported values: "top", "bottom", "left", "right".

Dropdown Item

• Slot (string)
  Content of the dropdown item, usually text or links.

• Accepts any HTML attributes for styling and accessibility.

Overview

The Dropdown component consists of four parts:

• Dropdown container: Manages open state and keyboard event handling globally.
• Dropdown trigger: The clickable (or context menu) element that toggles or opens the menu, with keyboard accessibility and optional tooltips.
• Dropdown items container: Shows the dropdown menu with smooth transitions and traps keyboard focus for accessibility. Position is configurable.
• Dropdown item: Individual selectable entries styled for hover, focus, and dark mode.

It integrates Alpine.js for interactivity and Tailwind CSS for styling, providing a fully accessible and customizable dropdown menu system optimized for Livewire integration.