daisyUI Kit 🌼

Dropdown

Dropdown can open or toggle a menu or other element when the DropdownButton is clicked.

Code Example 
<Dropdown>
  <DropdownButton>
    Click
  </DropdownButton>
  <DropdownContent class="z-10">
    <Menu class="p-2 shadow menu bg-base-100 rounded-box w-52">
      <MenuItem><a href="#">Item 1</a></MenuItem>
      <MenuItem><a href="#">Item 2</a></MenuItem>
    </Menu>
  </DropdownContent>
</Dropdown>

Components

The Dropdown component is the wrapping element. It includes properties for controlling

PropTypeDescription
placement
string
Sets the side on which the dropdown will open. Can be set to any of the below props. Can be set to any of the following:
bottom-start
bottom
bottom-end
top-start
top
top-end
left-start
left
left-end
right-start
right
right-end
strategy
string
Determines the placement CSS attribute. Can be fixed or absolute. default: absolute
auto-focus
boolean
Enables a focus trap inside of the DropdownContent. It automatically focuses the first element.

Note: There must be a focusable element or an error will be thrown. Links will either need a non-empty href or a tabindex.

The user can break focus by hitting escape or clicking outside of the Dropdown.
hover
boolean
Opens the dropdown on mouseover. Closes on mouseout.
    delay-enter
number
Changes the hover wait time before the Dropdown opens. default: 0.
    delay-leave
number
Changes the mouseout wait time before the Dropdown closes. default: 400
open
boolean
Allows manual control of the open/closed state.
close-on-click-outside
boolean
Closes the dropdown when clicking outside of the element.
random-id
string
Allows manually specifying the internal random id. This is required for SSR.

The DropdownButton is the element that opens/closes the Dropdown and shows/hides the DropdownContent. You can put any content inside.

⚠️ Important: The DropdownButton must be a direct child of the Dropdown element.

The DropdownTarget is an unstyled alternative to DropdownButton. It is typically used in menus and navbars where you want to style the DropdownButton to match the sibling elements.

The DropdownContent contains the content to show when open. It renders a details element and generally requires no manual styling, itself. Style the child elements, instead.

Position

Use the placement attribute to specify top, bottom, left, or right.

Code Example 
<script setup lang="ts">
const placements = ['top', 'bottom', 'left', 'right']
const placement = ref('top')
</script>

<template>
  <DemoExample class="space-x-8 flex-nowrap">
    <Select v-model="placement" :options="placements" class="relative bottom-6" />

    <Dropdown :placement="placement">
      <DropdownButton>
        Click
      </DropdownButton>
      <DropdownContainer class="z-10">
        <Menu class="p-2 shadow bg-base-200 rounded-box w-52 z-[1]">
          <MenuItem><a href="#">Item 1</a></MenuItem>
          <MenuItem><a href="#">Item 2</a></MenuItem>
        </Menu>
      </DropdownContainer>
    </Dropdown>
  </DemoExample>
</template>

Top

Use the top attribute to open upwards.

Code Example 
<Dropdown top>
  <DropdownButton>
    Click
  </DropdownButton>
  <DropdownContainer class="z-10">
    <Menu class="p-2 shadow bg-base-200 rounded-box w-52">
      <MenuItem><a href="#">Item 1</a></MenuItem>
      <MenuItem><a href="#">Item 2</a></MenuItem>
    </Menu>
  </DropdownContainer>
</Dropdown>

Left

Use the left attribute to open left.

Code Example 
<Dropdown left>
  <DropdownButton>
    Click
  </DropdownButton>
  <DropdownContainer class="z-10">
    <Menu class="p-2 shadow bg-base-200 rounded-box w-52">
      <MenuItem><a href="#">Item 1</a></MenuItem>
      <MenuItem><a href="#">Item 2</a></MenuItem>
    </Menu>
  </DropdownContainer>
</Dropdown>

Use the right attribute to open right.

Code Example 
<Dropdown right>
  <DropdownButton>
    Click
  </DropdownButton>
  <DropdownContainer class="z-10">
    <Menu class="p-2 shadow bg-base-200 rounded-box w-52">
      <MenuItem><a href="#">Item 1</a></MenuItem>
      <MenuItem><a href="#">Item 2</a></MenuItem>
    </Menu>
  </DropdownContainer>
</Dropdown>

Open

Use the open attribute to programmatically open the dropdown.

Code Example 
<Dropdown open>
  <Button is="label">
    Click
  </Button>
  <DropdownContainer class="z-10">
    <Menu class="p-2 shadow bg-base-200 rounded-box w-52">
      <MenuItem><a href="#">Item 1</a></MenuItem>
      <MenuItem><a href="#">Item 2</a></MenuItem>
    </Menu>
  </DropdownContainer>
</Dropdown>

Hover

Use the hover attribute to automatically open the dropdown on hover. You can still click to toggle the state.

Code Example 
<Dropdown hover>
  <Button is="label">
    Click
  </Button>
  <DropdownContainer class="z-10">
    <Menu class="p-2 shadow bg-base-200 rounded-box w-52">
      <MenuItem><a href="#">Item 1</a></MenuItem>
      <MenuItem><a href="#">Item 2</a></MenuItem>
    </Menu>
  </DropdownContainer>
</Dropdown>

Delay Enter

Use hover with delay-enter to customize the opening of the dropdown:

Code Example 
<Dropdown hover :delay-enter="1000">
  <DropdownButton>
    Hover Me
  </DropdownButton>
  <DropdownContainer class="z-10">
    <Menu class="p-2 shadow bg-base-200 rounded-box w-52 z-[2]">
      <MenuItem><a href="#">Item 1</a></MenuItem>
      <MenuItem><a href="#">Item 2</a></MenuItem>
    </Menu>
  </DropdownContainer>
</Dropdown>

Delay Leave

Use hover with delay-leave to customize the closing of the dropdown:

Code Example 
<Dropdown hover :delay-leave="0">
  <DropdownButton>
    Hover Me
  </DropdownButton>
  <DropdownContainer class="z-10">
    <Menu class="p-2 shadow bg-base-200 rounded-box w-52">
      <MenuItem><a href="#">Item 1</a></MenuItem>
      <MenuItem><a href="#">Item 2</a></MenuItem>
    </Menu>
  </DropdownContainer>
</Dropdown>

Close on Click Outside

Use the close-on-click-outside attribute to close the dropdown when clicking outside of the Dropdown element.

Code Example 
<Dropdown hover>
  <Button is="label">
    Click
  </Button>
  <DropdownContainer class="z-10">
    <Menu class="p-2 shadow bg-base-200 rounded-box w-52">
      <MenuItem><a href="#">Item 1</a></MenuItem>
      <MenuItem><a href="#">Item 2</a></MenuItem>
    </Menu>
  </DropdownContainer>
</Dropdown>