<.dropdown >
  <div tabindex="0" class="btn m-1">open or close</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown align="end">
  <div tabindex="0" class="btn m-1">Click</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown direction="top">
  <div tabindex="0" class="btn m-1">Click</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown align="end" direction="top">
  <div tabindex="0" class="btn m-1">Click</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown direction="bottom">
  <div tabindex="0" class="btn m-1">Click</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown align="end" direction="bottom">
  <div tabindex="0" class="btn m-1">Click</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown direction="left">
  <div tabindex="0" class="btn m-1">Click</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown align="end" direction="left">
  <div tabindex="0" class="btn m-1">Click</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown direction="right">
  <div tabindex="0" class="btn m-1">Click</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown align="end" direction="right">
  <div tabindex="0" class="btn m-1">Click</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown hover>
  <div tabindex="0" class="btn m-1">Click</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown open>
  <div tabindex="0" class="btn m-1">Click</div>
  <.menu tabindex="0" class="dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <:item><a>Item 1</a></:item>
    <:item><a>Item 2</a></:item>
  </.menu>
</.dropdown>

<.dropdown >
  <div tabindex="0" role="button" class="btn m-1">Click</div>
  <.card tabindex="0" padding="compact" class="dropdown-content bg-primary text-primary-content z-[1] w-64 p-2 shadow">
    <:card_title>
      Card title!
    </:card_title>
    <:card_body>
      <p>you can use any element as a dropdown.</p>
    </:card_body>
  </.card>
</.dropdown>