Dropdown

Dropdown can open a menu or any other element when the button is clicked.

Class name		Type
dropdown
Component
Dropdown container
dropdown-content
Part
Content part
dropdown-start
Placement
Align horizontally to start of button
dropdown-center
Placement
Align horizontally to center of button
dropdown-end
Placement
Align horizontally to end of button
dropdown-top
Placement
Open from top
dropdown-bottom
Placement
Open from bottom
dropdown-left
Placement
Open from left
dropdown-right
Placement
Open from right
dropdown-hover
Modifier
Opens on hover too
dropdown-open
Modifier
Force open

There are 3 methods to use a dropdowns

  1. details and summary elements
  2. popover API and anchor positioning new
  3. CSS focus

Method 1. details and summary

details and summary are native HTML elements that can be used to create dropdowns.
Dropdown using details and summary opens and closes the content when the summary is clicked. You can also open/close it using JS by adding/removing the open attribute

Structure
  Container for the button + content
              │
              │    button to toggle the visibility of the content
              │                        │
<details>   ──╯                        │
  <summary>open or close</summary>   ──╯
  Content
</details>

Dropdown using details and summary

open or close 
<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-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>
<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-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

Method 2. popover API and anchor positioning new

Popover API is the new HTML standard for creating dropdowns. It opens the dropdown on a top layer, which means there’s no need to z-index management and there’s no overflow issue.
Anchor positioning is a new CSS standard for positioning elements relative to an anchor.

Structure
<button
  style="anchor-name:--anchor-1"  ────────────────╮
  popovertarget="popover-1"   ───────╮            │
>Button</button>                Unique ID         │
                                     │            │
<div popover                         │      Positions this dropdown relative to this button
  id="popover-1"   ──────────────────╯            │
  style="position-anchor:--anchor-1"  ────────────╯
>Content</div>

popovertarget is the unique ID of the popover content.
anchor-name/position-anchor is the unique name of the anchor.

CSS Anchor Positioning is a new standard and is not supported in Firefox and Safari yet.
In Firefox and Safari, the dropdown will be positioned at the center of the screen, like a modal.

Dropdown using popover API and anchor positioning

<!-- change popover-1 and --acnhor-1 names. Use unique names for each dropdown -->
<button class="btn" popovertarget="popover-1" style="anchor-name:--anchor-1">
  Button
</button>
<ul class="dropdown menu w-32 rounded-box bg-base-100 shadow-sm"
  popover id="popover-1" style="position-anchor:--anchor-1">
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
</ul>
<!-- change popover-1 and --acnhor-1 names. Use unique names for each dropdown -->
<button class="btn" popovertarget="popover-1" style="anchor-name:--anchor-1">
  Button
</button>
<ul class="dropdown menu w-32 rounded-box bg-base-100 shadow-sm"
  popover id="popover-1" style="position-anchor:--anchor-1">
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
</ul>

Method 3. CSS focus

The content gets displayed when the button is focused.

Structure
                                                    Focusable button
                                                            │
<div>                                                       │
  <div tabindex="0" role="button">Click to open</div>  ─────╯
  <div tabindex="0">Content</div>   ───────╮ 
</div>                                     │
                           Content shown when button is focused

Why div?
Safari has a CSS bug since 2008 that prevents button elements from being focused, so we use div tabindex="0" as a workaround. This approach is accessible with the addition of role="button" and functions consistently across all browsers.

Dropdown menu

Click outside to close
Click to open
<div class="$$dropdown">
  <div tabindex="0" role="button" class="$$btn m-1">Click</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown">
  <div tabindex="0" role="button" class="$$btn m-1">Click</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Positions

Dropdown / aligns to start of button horizontally

Click ⬇️
<div class="$$dropdown $$dropdown-start">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-start">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown / aligns to end of button horizontally

Click ⬇️
<div class="$$dropdown $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn m-1">Click  ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn m-1">Click  ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown / aligns to center of button horizontally

Click ⬇️
<div class="$$dropdown $$dropdown-center">
  <div tabindex="0" role="button" class="$$btn m-1">Click  ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-center">
  <div tabindex="0" role="button" class="$$btn m-1">Click  ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown top

Click ⬆️
<div class="$$dropdown $$dropdown-top">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬆️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-top">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬆️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown top / aligns to center of button horizontally

Click ⬆️
<div class="$$dropdown $$dropdown-top $$dropdown-center">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬆️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-top $$dropdown-center">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬆️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown top / aligns to end of button horizontally

Click ⬆️
<div class="$$dropdown $$dropdown-top $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬆️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-top $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬆️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown bottom (default)

Click ⬇️
<div class="$$dropdown $$dropdown-bottom">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-bottom">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown bottom (default) / aligns to center of button horizontally

Click ⬇️
<div class="$$dropdown $$dropdown-bottom $$dropdown-center">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-bottom $$dropdown-center">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown bottom (default) / aligns to end of button horizontally

Click ⬇️
<div class="$$dropdown $$dropdown-bottom $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-bottom $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬇️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown left

Click ⬅️
<div class="$$dropdown $$dropdown-left">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬅️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-left">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬅️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown left / aligns to center of button vertically

Click ⬅️
<div class="$$dropdown $$dropdown-left $$dropdown-center">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬅️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-left $$dropdown-center">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬅️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown left / aligns to end of button vertically

Click ⬅️
<div class="$$dropdown $$dropdown-left $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬅️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-left $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn m-1">Click ⬅️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown right

Click ➡️
<div class="$$dropdown $$dropdown-right">
  <div tabindex="0" role="button" class="$$btn m-1">Click ➡️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-right">
  <div tabindex="0" role="button" class="$$btn m-1">Click ➡️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown right / aligns to end of button vertically

Click ➡️
<div class="$$dropdown $$dropdown-right $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn m-1">Click ➡️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-right $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn m-1">Click ➡️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Dropdown right / aligns to center of button vertically

Click ➡️
<div class="$$dropdown $$dropdown-right $$dropdown-center">
  <div tabindex="0" role="button" class="$$btn m-1">Click ➡️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-right $$dropdown-center">
  <div tabindex="0" role="button" class="$$btn m-1">Click ➡️</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Modifiers

Dropdown on hover

Hover
<div class="$$dropdown $$dropdown-hover">
  <div tabindex="0" role="button" class="$$btn m-1">Hover</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-hover">
  <div tabindex="0" role="button" class="$$btn m-1">Hover</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Force open

Button
<div class="$$dropdown $$dropdown-open">
  <div tabindex="0" role="button" class="$$btn m-1">Button</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>
<div class="$$dropdown $$dropdown-open">
  <div tabindex="0" role="button" class="$$btn m-1">Button</div>
  <ul tabindex="0" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

More examples

Card as dropdown

Click

This is a card. You can use any element as a dropdown.

<div class="$$dropdown">
  <div tabindex="0" role="button" class="$$btn m-1">Click</div>
  <div
    tabindex="0"
    class="$$dropdown-content $$card $$card-sm bg-base-100 z-1 w-64 shadow-md">
    <div class="$$card-body">
      <p>This is a card. You can use any element as a dropdown.</p>
    </div>
  </div>
</div>
<div class="$$dropdown">
  <div tabindex="0" role="button" class="$$btn m-1">Click</div>
  <div
    tabindex="0"
    class="$$dropdown-content $$card $$card-sm bg-base-100 z-1 w-64 shadow-md">
    <div class="$$card-body">
      <p>This is a card. You can use any element as a dropdown.</p>
    </div>
  </div>
</div>

Dropdown in navbar

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

Helper dropdown

A normal text and a helper dropdown

You needed more info?

Here is a description!

A normal text and a helper dropdown
<div class="$$dropdown $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn $$btn-circle $$btn-ghost $$btn-xs text-info">
    <svg
      tabindex="0"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      class="h-4 w-4 stroke-current">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
  </div>
  <div
    tabindex="0"
    class="$$card $$card-sm $$dropdown-content bg-base-100 rounded-box z-1 w-64 shadow-sm">
    <div tabindex="0" class="$$card-body">
      <h2 class="$$card-title">You needed more info?</h2>
      <p>Here is a description!</p>
    </div>
  </div>
</div>
A normal text and a helper dropdown
<div class="$$dropdown $$dropdown-end">
  <div tabindex="0" role="button" class="$$btn $$btn-circle $$btn-ghost $$btn-xs text-info">
    <svg
      tabindex="0"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      class="h-4 w-4 stroke-current">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
  </div>
  <div
    tabindex="0"
    class="$$card $$card-sm $$dropdown-content bg-base-100 rounded-box z-1 w-64 shadow-sm">
    <div tabindex="0" class="$$card-body">
      <h2 class="$$card-title">You needed more info?</h2>
      <p>Here is a description!</p>
    </div>
  </div>
</div>
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser