All you'll need

Menus is a common piece of many user interfaces, regrouping actions/commands under a single element.
Dropdown menus are menus inside a dropdown component.

<x-menu class="bg-base-100 border-1 border-neutral-content rounded-md">
  <x-menuItem label="Wifi"       icon="heroicon-o-wifi"              onclick="alert('Wifi clicked!')"/>
  <x-menuItem label="Microphone" icon="heroicon-o-microphone"        onclick="alert('Micro clicked!')"/>
  <x-menuItem label="Command"    icon="heroicon-o-command-line"      onclick="alert('Command clicked!')"/>
  <x-menuItem label="Download"   icon="heroicon-o-arrow-down-circle" onclick="alert('Download clicked!')"/>
</x-menu>

#Do something

A menu with no action set on its items would not be very useful, would it?
To execute a script, use the onclick or Alpine's @click events; to open another page from the menu, add a value onto href attribute of the corresponding menu item.

<x-menu class="bg-base-100 border-1 border-neutral-content rounded-md">
  <x-menuItem onclick="alert('Action 1 clicked!')" label="Action 1"/>
  <x-menuItem onclick="alert('Action 2 clicked!')" label="Action 2"/>
  <x-menuItem href="#" label="Link 1"/>
  <x-menuItem href="#" label="Link 2"/>
</x-menu>

#Customization

#Styling menus

<x-menu class="bg-base-100 border-1 border-neutral-content rounded-md">
  <x-menuItem label="Action 1"/>
  <x-menuItem label="Action 2"/>
  <x-menuItem label="Link 1"/>
  <x-menuItem label="Link 2"/>
</x-menu>

#Sub-menus

Just like regular applications, menu items can have sub-menus.

Add the collapsible attribute to an item with sub-menu to make it collapsible.
You can make a collapsible sub-menu open by default by adding the open attribute.

<!-- Menu with sub-menus -->
<x-menu class="w-60 bg-base-100 border-1 border-neutral-content rounded-md">
  <x-menuItem label="Item 1"/>
  <x-menuItem label="Item 2"/>
  <x-menuItem label="Item 3">
	<x-menu>
	  <x-menuItem label="Sub-item 3.1"/>
  	  <x-menuItem label="Sub-item 3.2"/>
      <x-menuItem label="Sub-item 3.3"/>
	</x-menu>
  </x-menuItem>
  <x-menuItem label="Item 4">
	<x-menu>
	  <x-menuItem label="Sub-item 4.1"/>
  	  <x-menuItem label="Sub-item 4.2"/>
      <x-menuItem label="Sub-item 4.3">
		<x-menu>
	    <x-menuItem label="Sub-item 4.3.1"/>
  	    <x-menuItem label="Sub-item 4.3.2"/>
        <x-menuItem label="Sub-item 4.3.3"/>
	  </x-menu>
	  </x-menuItem>
	</x-menu>
  </x-menuItem>
</x-menu>

<!-- An identical menu where sub-menus are collapsible. Some sub-menus are open when page loads -->
<x-menu class="w-60 bg-base-100 border-1 border-neutral-content rounded-md">
  <x-menuItem label="Item 1"/>
  <x-menuItem label="Item 2"/>
  <x-menuItem label="Item 3" collapsible open>
	<x-menu>
	  <x-menuItem label="Sub-item 3.1"/>
  	  <x-menuItem label="Sub-item 3.2"/>
      <x-menuItem label="Sub-item 3.3"/>
	</x-menu>
  </x-menuItem>
  <x-menuItem label="Item 4" collapsible>
	<x-menu>
	  <x-menuItem label="Sub-item 4.1"/>
  	  <x-menuItem label="Sub-item 4.2"/>
      <x-menuItem label="Sub-item 4.3" collapsible open>
		<x-menu>
	    <x-menuItem label="Sub-item 4.3.1"/>
  	    <x-menuItem label="Sub-item 4.3.2"/>
        <x-menuItem label="Sub-item 4.3.3"/>
	  </x-menu>
	  </x-menuItem>
	</x-menu>
  </x-menuItem>
</x-menu>

#Horizontal menu

Menu can be organized in an horizontal fashion. This is how the menus popping out of the menu bar were made and it is a great way to make all the menu options visible at once, yet well-organized.

<x-menu class="menu-horizontal bg-base-100 border-1 border-neutral-content rounded-md">
  <x-menuItem label="Item 1"/>
  <x-menuItem label="Item 2"/>
  <x-menuItem label="Item 3">
	<x-menu>
	  <x-menuItem label="Sub-item 3.1"/>
  	  <x-menuItem label="Sub-item 3.2"/>
      <x-menuItem label="Sub-item 3.3"/>
	</x-menu>
  </x-menuItem>
  <x-menuItem label="Item 4">
	<x-menu>
	  <x-menuItem label="Sub-item 4.1"/>
  	  <x-menuItem label="Sub-item 4.2"/>
      <x-menuItem label="Sub-item 4.3" collapsible>
		<x-menu>
	    <x-menuItem label="Sub-item 4.3.1"/>
  	    <x-menuItem label="Sub-item 4.3.2"/>
        <x-menuItem label="Sub-item 4.3.3"/>
	  </x-menu>
	  </x-menuItem>
	</x-menu>
  </x-menuItem>
</x-menu>

<x-menu class="menu-horizontal bg-base-100 border-1 border-neutral-content rounded-md">
  <x-menuItem label="Item 1"/>
  <x-menuItem label="Item 2"/>
  <x-menuItem label="Item 3" collapsible>
	<x-menu>
	  <x-menuItem label="Sub-item 3.1"/>
  	  <x-menuItem label="Sub-item 3.2"/>
      <x-menuItem label="Sub-item 3.3"/>
	</x-menu>
  </x-menuItem>
  <x-menuItem label="Item 4" collapsible>
	<x-menu>
	  <x-menuItem label="Sub-item 4.1"/>
  	  <x-menuItem label="Sub-item 4.2"/>
      <x-menuItem label="Sub-item 4.3" collapsible>
		<x-menu>
	    <x-menuItem label="Sub-item 4.3.1"/>
  	    <x-menuItem label="Sub-item 4.3.2"/>
        <x-menuItem label="Sub-item 4.3.3"/>
	  </x-menu>
	  </x-menuItem>
	</x-menu>
  </x-menuItem>
</x-menu>

#Troubleshoot

#Not using label on an item with sub-menu

If you create an item with sub-menu, do not forget to properly place its label text inside the label attribute or the label slot.
If you fail to do so, you will see:

<x-menu class="menu-horizontal bg-base-100 border-1 border-neutral-content rounded-md">
<!-- Incorrect -->
  <x-menuItem title>
	Incorrect item definition
	<x-menu>
	  <x-menuItem label="There is an empty item above me"/>
  	  <x-menuItem label="Sub-item"/>
	</x-menu>
  </x-menuItem>

<!-- Label in the attribute -->
  <x-menuItem title label="Correct definition using the attribute">
	<x-menu>
	  <x-menuItem label="Sub-item"/>
  	  <x-menuItem label="Sub-item"/>
	</x-menu>
  </x-menuItem>

<!-- Label in the slot -->
  <x-menuItem title>
	<x-slot:label>
	  Correct definition using the slot
	</x-slot:label>
	<x-menu>
	  <x-menuItem label="Sub-item"/>
  	  <x-menuItem label="Sub-item"/>
	</x-menu>
  </x-menuItem>
</x-menu>

Menu