Tailwind Admin Template

Component Library

Browse and explore components

Dropdown

A Dropdown is a UI component that displays a list of options or actions triggered by user interaction.

Basic Dropdown

import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import { Icon } from '@iconify/react'

const BasicDropdownCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-primary gap-2'>
          Options
          <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <button className='ui-dropdown-item group'>
              <Icon icon='solar:pen-new-square-outline' height={18} />
              Edit
              <kbd className='ms-auto hidden text-xs group-data-[focus]:inline '>
                ⌘ E
              </kbd>
            </button>
          </MenuItem>
          <MenuItem>
            <button className='ui-dropdown-item group '>
              <Icon icon='solar:copy-outline' height={18} />
              Duplicate
              <kbd className='ms-auto hidden text-xs group-data-[focus]:inline'>
                ⌘ D
              </kbd>
            </button>
          </MenuItem>
          <MenuItem>
            <button className='ui-dropdown-item group '>
              <Icon icon='solar:archive-check-broken' height={18} />
              Archive
              <kbd className='ms-auto hidden text-xs group-data-[focus]:inline'>
                ⌘ A
              </kbd>
            </button>
          </MenuItem>
          <MenuItem>
            <button className='ui-dropdown-item group '>
              <Icon icon='solar:trash-bin-minimalistic-2-outline' height={18} />
              Delete
              <kbd className='ms-auto hidden text-xs group-data-[focus]:inline'>
                ⌘ D
              </kbd>
            </button>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default BasicDropdownCode

Links Dropdown

import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import { Icon } from '@iconify/react'

const LinkDropdownCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-secondary text-white gap-2'>
          My Account <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <a className='ui-dropdown-item' href='/settings'>
              Settings
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/support'>
              Support
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/license'>
              License
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default LinkDropdownCode

Button Action

import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import { Icon } from '@iconify/react'

const ButtonActionCode = () => {
  function showSettingsDialog() {
    alert('Open settings dialog!')
  }
  function showSupportDialog() {
    alert('Open Support dialog!')
  }
  function showLogoutDialog() {
    alert('Open Logout dialog!')
  }

  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-success gap-2'>
          My Action <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <button onClick={showSettingsDialog} className='ui-dropdown-item'>
              Settings
            </button>
          </MenuItem>
          <MenuItem>
            <button onClick={showSupportDialog} className='ui-dropdown-item'>
              Support
            </button>
          </MenuItem>
          <MenuItem>
            <button onClick={showLogoutDialog} className='ui-dropdown-item'>
              Logout
            </button>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default ButtonActionCode

Disable Items

import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import { Icon } from '@iconify/react/dist/iconify.js'

const DisableItemCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-error gap-2'>
          My Profile <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <a className='ui-dropdown-item' href='/settings'>
              Settings
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/support'>
              Support
            </a>
          </MenuItem>
          <MenuItem disabled>
            <a
              className='ui-dropdown-item data-[disabled]:opacity-50'
              href='/license'>
              License
            </a>
          </MenuItem>
          <MenuItem disabled>
            <a
              className='ui-dropdown-item data-[disabled]:opacity-50'
              href='/logout'>
              Logout
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default DisableItemCode

Separating Items

import {
  Menu,
  MenuButton,
  MenuItems,
  MenuItem,
  MenuSeparator,
} from '@headlessui/react'
import { Icon } from '@iconify/react'

const SepratingItemsCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-warning gap-2'>
          My Account <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <a className='ui-dropdown-item' href='/settings'>
              Settings
            </a>
          </MenuItem>
          <MenuSeparator className='my-1 h-px bg-border dark:bg-gray-600' />
          <MenuItem>
            <a className='ui-dropdown-item' href='/support'>
              Support
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/license'>
              License
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default SepratingItemsCode

Grouping Items

import {
  Menu,
  MenuButton,
  MenuItems,
  MenuSection,
  MenuHeading,
  MenuItem,
  MenuSeparator,
} from '@headlessui/react'
import { Icon } from '@iconify/react'

const GroupItemCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-info gap-2'>
          My Groups
          <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuSection>
            <MenuHeading className='text-ld text-sm font-semibold px-4 py-1'>
              Settings
            </MenuHeading>
            <MenuItem>
              <a className='ui-dropdown-item' href='/profile'>
                My profile
              </a>
            </MenuItem>
            <MenuItem>
              <a className='ui-dropdown-item' href='/notifications'>
                Notifications
              </a>
            </MenuItem>
          </MenuSection>
          <MenuSeparator className='my-1 h-px bg-border dark:bg-gray-600' />
          <MenuSection>
            <MenuHeading className='text-ld text-sm font-semibold px-4 py-1'>
              Support
            </MenuHeading>
            <MenuItem>
              <a className='ui-dropdown-item' href='/support'>
                Documentation
              </a>
            </MenuItem>
            <MenuItem>
              <a className='ui-dropdown-item' href='/license'>
                License
              </a>
            </MenuItem>
          </MenuSection>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default GroupItemCode

Position

import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import { Icon } from '@iconify/react/dist/iconify.js'

const DropdownPositionCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-secondary text-white gap-2'>
          My Account <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='top start'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <a className='ui-dropdown-item' href='/settings'>
              Settings
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/support'>
              Support
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/license'>
              License
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default DropdownPositionCode

Dropdown Width

import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import { Icon } from '@iconify/react'

const DropdwonWidthCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button  bg-primary gap-2'>
          My Account <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation !w-80 !max-w-80'>
          <MenuItem>
            <a className='ui-dropdown-item' href='/settings'>
              Settings
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/support'>
              Support
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/license'>
              License
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default DropdwonWidthCode

Transitions

'use client'
import { Icon } from '@iconify/react/dist/iconify.js'
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'

const TransitionDropdownCode = () => {
  return (
    <>
      <Menu>
        <MenuButton className='ui-button  bg-success gap-2'>
          My Account <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown origin-top transition duration-500 ease-out data-[closed]:scale-95 data-[closed]:opacity-0'>
          <MenuItem>
            <a className='ui-dropdown-item' href='/settings'>
              Settings
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/support'>
              Support
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/license'>
              License
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </>
  )
}

export default TransitionDropdownCode

Framer Motion

'use client'
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import { Icon } from '@iconify/react/dist/iconify.js'
import { AnimatePresence, motion } from 'framer-motion'

const FramerMotionCode = () => {
  return (
    <>
      <Menu>
        {({ open }) => (
          <div>
            <MenuButton className='ui-button  bg-error gap-2'>
              My Account{' '}
              <Icon icon='solar:alt-arrow-down-outline' height={18} />
            </MenuButton>
            <AnimatePresence>
              {open && (
                <MenuItems
                  static
                  as={motion.div}
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.95 }}
                  anchor='bottom'
                  className='origin-top ui-dropdown '>
                  <MenuItem>
                    <a className='ui-dropdown-item' href='/settings'>
                      Settings
                    </a>
                  </MenuItem>
                  <MenuItem>
                    <a className='ui-dropdown-item' href='/support'>
                      Support
                    </a>
                  </MenuItem>
                  <MenuItem>
                    <a className='ui-dropdown-item' href='/license'>
                      License
                    </a>
                  </MenuItem>
                </MenuItems>
              )}
            </AnimatePresence>
          </div>
        )}
      </Menu>
    </>
  )
}

export default FramerMotionCode

Closing Manually

'use client'
import { Icon } from '@iconify/react'
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import MyCustomLink from '../MyCustomLink'

const ClosingManuallyCode = () => {
  return (
    <>
      <Menu>
        <MenuButton className='ui-button  bg-primary gap-2'>
          Terms <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems anchor='bottom' className='ui-dropdown'>
          <MenuItem>
            {({ close }) => (
              <MyCustomLink href='/' onClick={close}>
                Read and accept
              </MyCustomLink>
            )}
          </MenuItem>
        </MenuItems>
      </Menu>
    </>
  )
}

export default ClosingManuallyCode

Rendering Elements

'use client'
import { forwardRef } from 'react'
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import { Icon } from '@iconify/react'
let MyCustomButton = forwardRef(function (props: any, ref: any) {
  return <button className='...' ref={ref} {...props} />
})

const RendringElementsCode = () => {
  return (
    <>
      <Menu>
        <MenuButton
          as={MyCustomButton}
          className='ui-button text-white  bg-secondary gap-2'>
          My account <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          anchor='bottom'
          as='section'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem as='a' className='ui-dropdown-item' href='/settings'>
            Settings
          </MenuItem>
          <MenuItem as='a' className='ui-dropdown-item' href='/support'>
            Support
          </MenuItem>
          <MenuItem as='a' className='ui-dropdown-item' href='/license'>
            License
          </MenuItem>
        </MenuItems>
      </Menu>
    </>
  )
}

export default RendringElementsCode

Component Library

FORMS

DATA DISPLAY

FEEDBACK

NAVIGATION

SURFACES

UTILS

CHARTS

Dropdown

Basic Dropdown

Component Code

Links Dropdown

Component Code

Button Action

Component Code

Disable Items

Component Code

Separating Items

Component Code

Grouping Items

Component Code

Position

Component Code

Dropdown Width

Component Code

Transitions

Component Code

Framer Motion

Component Code

Closing Manually

Component Code

Rendering Elements

Component Code