# Dropdown menu using <details> tag

Stays open until gets clicked again. Or you can close it using JS by removing the `open` attribute

<details class="dropdown">
  <summary class="btn m-1">open or close</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown">
  <summary className="btn m-1">open or close</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown>
  <summary btn m-1>open or close</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Dropdown menu

<details class="dropdown">
  <summary class="btn m-1">click to open</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown">
  <summary className="btn m-1">click to open</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown>
  <summary btn m-1>click to open</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Dropdown bottom (default)

<details class="dropdown">
  <summary class="btn m-1">click to open</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown">
  <summary className="btn m-1">click to open</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown>
  <summary btn m-1>click to open</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Dropdown bottom aligns to end

<details class="dropdown dropdown-end">
  <summary class="btn m-1">click to open</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown dropdown-end">
  <summary className="btn m-1">click to open</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown dropdown-end>
  <summary btn m-1>click to open</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Dropdown top

<details class="dropdown dropdown-top">
  <summary class="btn m-1">click to open</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown dropdown-top">
  <summary className="btn m-1">click to open</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown dropdown-top>
  <summary btn m-1>click to open</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Dropdown top aligns to end

<details class="dropdown dropdown-top dropdown-end">
  <summary class="btn m-1">click to open</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown dropdown-top dropdown-end">
  <summary className="btn m-1">click to open</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown dropdown-top dropdown-end>
  <summary btn m-1>click to open</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Dropdown left

<details class="dropdown dropdown-left">
  <summary class="btn m-1">click to open</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown dropdown-left">
  <summary className="btn m-1">click to open</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown dropdown-left>
  <summary btn m-1>click to open</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Dropdown left aligns to end

<details class="dropdown dropdown-left dropdown-end">
  <summary class="btn m-1">click to open</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown dropdown-left dropdown-end">
  <summary className="btn m-1">click to open</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown dropdown-left dropdown-end>
  <summary btn m-1>click to open</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Dropdown right

<details class="dropdown dropdown-right">
  <summary class="btn m-1">click to open</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown dropdown-right">
  <summary className="btn m-1">click to open</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown dropdown-right>
  <summary btn m-1>click to open</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Dropdown right aligns to end

<details class="dropdown dropdown-right dropdown-end">
  <summary class="btn m-1">click to open</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown dropdown-right dropdown-end">
  <summary className="btn m-1">click to open</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown dropdown-right dropdown-end>
  <summary btn m-1>click to open</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Dropdown on hover

<details class="dropdown dropdown-hover">
  <summary class="btn m-1">click to open</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown dropdown-hover">
  <summary className="btn m-1">click to open</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown dropdown-hover>
  <summary btn m-1>click to open</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Dropdown force open

<details class="dropdown dropdown-open">
  <summary class="btn m-1">click to open</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details className="dropdown dropdown-open">
  <summary className="btn m-1">click to open</summary>
  <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

<details dropdown dropdown-open>
  <summary btn m-1>click to open</summary>
  <ul menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

# Card as dropdown

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

<div className="dropdown">
  <div tabindex="0" role="button" className="btn m-1">Click</div>
  <div
    tabindex="0"
    className="dropdown-content card card-compact bg-primary text-primary-content z-1 w-64 p-2 shadow">
    <div className="card-body">
      <h3 className="card-title">Card title!</h3>
      <p>you can use any element as a dropdown.</p>
    </div>
  </div>
</div>

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

# Dropdown in navbar

<div class="navbar bg-base-300 rounded-box">
  <div class="flex-1 px-2 lg-flex-none">
    <a class="text-lg font-bold">daisyUI</a>
  </div>
  <div class="flex flex-1 justify-end px-2">
    <div class="flex items-stretch">
      <a class="btn btn-ghost rounded-btn">Button</a>
      <div class="dropdown dropdown-end">
        <div tabindex="0" role="button" class="btn btn-ghost rounded-btn">Dropdown</div>
        <ul
          tabindex="0"
          class="menu dropdown-content bg-base-100 rounded-box z-1 mt-4 w-52 p-2 shadow">
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div className="navbar bg-base-300 rounded-box">
  <div className="flex-1 px-2 lg-flex-none">
    <a className="text-lg font-bold">daisyUI</a>
  </div>
  <div className="flex flex-1 justify-end px-2">
    <div className="flex items-stretch">
      <a className="btn btn-ghost rounded-btn">Button</a>
      <div className="dropdown dropdown-end">
        <div tabindex="0" role="button" className="btn btn-ghost rounded-btn">Dropdown</div>
        <ul
          tabindex="0"
          className="menu dropdown-content bg-base-100 rounded-box z-1 mt-4 w-52 p-2 shadow">
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div navbar bg-base-300 rounded-box>
  <div flex-1 px-2 lg-flex-none>
    <a text-lg font-bold>daisyUI</a>
  </div>
  <div flex flex-1 justify-end px-2>
    <div flex items-stretch>
      <a btn btn-ghost rounded-btn>Button</a>
      <div dropdown dropdown-end>
        <div tabindex="0" role="button" btn btn-ghost rounded-btn>Dropdown</div>
        <ul
          tabindex="0"
          menu dropdown-content bg-base-100 rounded-box z-1 mt-4 w-52 p-2 shadow>
          <li><a>Item 1</a></li>
          <li><a>Item 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>