Get daisyUI T-shirts, Hoodies, Mugs, Stickers, and more!

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 [Default]
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 [Default]
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 theopenattribute

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 positioningnew

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>

popovertargetis the unique ID of the popover content.
anchor-name/position-anchoris the unique name of the anchor.

CSS Anchor Positioning is a new standard but isn't yet supported in Firefox and Safari (caniuse.com).
In those browsers, the dropdown will appear centered like a modal.
There's alsothis polyfillthat can be helpful.

Dropdown using popover API and anchor positioning

<!-- change popover-1 and --anchor-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-52 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 --anchor-1 names. Use unique names for each dropdown */}
{/* For TSX uncomment the commented types below */}
<button className="$$btn" popoverTarget="popover-1" style={{ anchorName: "--anchor-1" } /* as React.CSSProperties */}>
  Button
</button>

<ul className="$$dropdown $$menu w-52 rounded-box bg-base-100 shadow-sm"
  popover="auto" id="popover-1" style={{ positionAnchor: "--anchor-1" } /* as React.CSSProperties */ }>
  <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 aCSS bugsince 2008 that prevents button elements from being focused, so we use divtabindex="0"as a workaround. This approach is accessible with the addition ofrole="button"and functions consistently across all browsers.

This dropdown closes when focus is lost. Avoid placing elements in it that remove focus from dropdown content. For example a<dialog>element inside the dropdown.

To close the dropdown after click, you can use something likeonclick="document.activeElement.blur()".Example

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 on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

NEXUS
Official daisyUI Dashboard Template

Available on daisyUI store

More details
Please upgrade your browser