@headlessui/react

Dropdown Menu

This feature allows developers to create a dropdown menu with accessible interactions. The example shows a basic dropdown menu with two options, highlighting the active option.

import { Menu } from '@headlessui/react';

<Menu>
  <Menu.Button>More</Menu.Button>
  <Menu.Items>
    <Menu.Item>
      {({ active }) => (
        <a
          className={`${active ? 'bg-blue-500 text-white' : 'text-gray-900'}`}
          href="/account-settings"
        >
          Account settings
        </a>
      )}
    </Menu.Item>
    <Menu.Item>
      {({ active }) => (
        <a
          className={`${active ? 'bg-blue-500 text-white' : 'text-gray-900'}`}
          href="/sign-out"
        >
          Sign out
        </a>
      )}
    </Menu.Item>
  </Menu.Items>
</Menu>

Dialog (Modal)

This feature enables the creation of a dialog (modal) component. The example demonstrates how to use the Dialog component to create a modal that can be opened, closed, and contains accessible titles and descriptions.

import { Dialog } from '@headlessui/react';
import { useState } from 'react';

function MyDialog() {
  let [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Dialog</button>

      <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
        <Dialog.Overlay />

        <Dialog.Title>Deactivate account</Dialog.Title>
        <Dialog.Description>
          This will permanently deactivate your account
        </Dialog.Description>

        <button onClick={() => setIsOpen(false)}>Deactivate</button>
        <button onClick={() => setIsOpen(false)}>Cancel</button>
      </Dialog>
    </>
  );
}