Dropdown

Dropdowns open upon clicking a trigger button, and close when clicking anywhere outside the dropdown.

Click me!
Dropdown content 
<x-dropdown class="w-60 h-40 border-1 border-neutral-content bg-base-100 rounded-box p-2">
  <x-slot:trigger class="btn">Click me!</x-slot:trigger>
  Dropdown content
</x-dropdown>

With the hover attribute, it is also possible to open the dropdown by simply moving the cursor over the trigger.

Hover me!
I open automatically 
<x-dropdown hover class="w-60 h-32 border-1 border-base-content bg-base-100 rounded-box p-2">
  <x-slot:trigger class="btn">Hover me!</x-slot:trigger>
  I open automatically
</x-dropdown>

#Dropdown with menus

A common usage for dropdowns is to encapsulate a menu into them.

Open menu 
<x-dropdown class="border-1 border-neutral-content bg-base-100 rounded-box p-2">
  <x-slot:trigger class="btn">Open menu</x-slot:trigger>
  <x-menu>
	<x-menuItem label="Item 1" icon="heroicon-o-wifi"/>
	<x-menuItem label="Item 2" icon="heroicon-o-microphone"/>
	<x-menuItem label="Item 3" icon="heroicon-o-command-line"/>
	<x-menuItem label="Item 4" icon="heroicon-o-arrow-down-circle"/>
  </x-menu>
</x-dropdown>

#Dropdown position

#Alignment

The alignment between the dropdown and its trigger can be changed thanks to the align (start|center|end) attribute.

Default 
align="start"
is the default
Center dropdown 
align=centered
Right-aligned dropdown 
align=end
<x-dropdown align="start" class="w-40 border-1 border-neutral-content bg-base-100 rounded-box p-2">
  <x-slot:trigger class="btn">Default</x-slot:trigger>
  <pre><code>align="start"</code></pre> is the default
</x-dropdown>

<x-dropdown align="center" class="w-40 border-1 border-neutral-content bg-base-100 rounded-box p-2">
  <x-slot:trigger class="btn">Center dropdown</x-slot:trigger>
<pre><code>align=centered</code></pre>
</x-dropdown>

<x-dropdown align="end" class="w-40 border-1 border-neutral-content bg-base-100 rounded-box p-2">
  <x-slot:trigger class="btn">Right-aligned dropdown</x-slot:trigger>
<pre><code>align=end</code></pre>
</x-dropdown>

#Direction

While dropdowns pop below their trigger by default, this can be changed with the direction (top|bottom|left|right) attribute.

Pop below 
direction=bottom
Pop above 
direction=top
Pop left 
direction=left
Pop right 
direction=right
<x-dropdown direction="bottom" class="border-1 border-neutral-content bg-base-100 rounded-box p-2">
  <x-slot:trigger class="btn">Pop below</x-slot:trigger>
<pre><code>direction=bottom</code></pre>
</x-dropdown>

<x-dropdown direction="top" class="border-1 border-neutral-content bg-base-100 rounded-box p-2">
  <x-slot:trigger class="btn">Pop above</x-slot:trigger>
<pre><code>direction=top</code></pre>
</x-dropdown>

<x-dropdown direction="left" class="border-1 border-neutral-content bg-base-100 rounded-box p-2">
  <x-slot:trigger class="btn">Pop left</x-slot:trigger>
<pre><code>direction=left</code></pre>
</x-dropdown>

<x-dropdown direction="right" class="border-1 border-neutral-content bg-base-100 rounded-box p-2">
  <x-slot:trigger class="btn">Pop right</x-slot:trigger>
<pre><code>direction=right</code></pre>
</x-dropdown>

#Anchor

With an anchor, you can make it so the dropdown pops next to another control.

Anchor
Pop down 
<div class="btn" style="anchor-name:--anchor-1">Anchor</div>
<x-dropdown class="border-1 border-neutral-content bg-base-100 rounded-box p-2" anchor="--anchor-1">
  <x-slot:trigger class="btn">Pop below anchor</x-slot:trigger>
Pop down
</x-dropdown>