Dropdown

A dropdown menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Props (Dropdown)

Prop	Type	Default	Description
buttonContent	ReactNode	-	The content displayed inside the dropdown's trigger button.
children	ReactNode	-	The dropdown menu items, typically `Dropdown.Item` components.
buttonClassName	string	''	Optional classes to apply to the trigger button.

Props (Dropdown.Item)

Prop	Type	Description
children	ReactNode	The content of the dropdown item.
...props	any	Any other props are passed to the underlying `a` tag.

Examples

Basic Dropdown

A standard dropdown menu triggered by a button. Built with Headless UI for accessibility.

import Dropdown from '@/components/Dropdown';

export default function MyComponent() {
  return (
    <Dropdown buttonContent="Options">
      <Dropdown.Item href="#">Account settings</Dropdown.Item>
      <Dropdown.Item href="#">Support</Dropdown.Item>
      <Dropdown.Item href="#">License</Dropdown.Item>
      <Dropdown.Item onClick={() => alert('Signing out!')}>
        Sign out
      </Dropdown.Item>
    </Dropdown>
  );
}