headless_ui_dropdown_menu_with_tailwind_css_styling.ts

1import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
2
3export default function Example() {
4  return (
5    <Menu>
6      <MenuButton className="inline-flex items-center gap-2 rounded-md bg-gray-800 py-1.5 px-3 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:outline-none data-[hover]:bg-gray-700 data-[open]:bg-gray-700 data-[focus]:outline-1 data-[focus]:outline-white">
7        Options
8      </MenuButton>
9
10      <MenuItems
11        transition
12        anchor="bottom end"
13        className="w-52 origin-top-right rounded-xl border border-white/5 bg-white/5 p-1 text-sm/6 text-white transition duration-100 ease-out [--anchor-gap:var(--spacing-1)] focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0"
14      >
15        <MenuItem>
16          <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
17            Edit
18            <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-[focus]:inline">⌘E</kbd>
19          </button>
20        </MenuItem>
21        <MenuItem>
22          <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
23            Duplicate
24            <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-[focus]:inline">⌘D</kbd>
25          </button>
26        </MenuItem>
27        <div className="my-1 h-px bg-white/5" />
28        <MenuItem>
29          <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
30            Archive
31            <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-[focus]:inline">⌘N</kbd>
32          </button>
33        </MenuItem>
34        <MenuItem>
35          <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
36            Delete
37            <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-[focus]:inline">⌘D</kbd>
38          </button>
39        </MenuItem>
40      </MenuItems>
41    </Menu>
42  )
43}