# Dropdown components

Free and open-source React dropdown components built for modern applications and websites. These dropdowns are built using React Aria and styled with Tailwind CSS.

- [GitHub](https://github.com/untitleduico/react/tree/main/components/base/dropdown)
- [React Aria](https://react-spectrum.adobe.com/react-aria/Popover.html)
- [Figma](/content/components/dropdowns/index.html)

## [Installation](/content/react/components/dropdowns#installation/index.html)

You can add this dropdown component using our CLI or manually:

- **CLI**  
  ```
  npx untitledui@latest add dropdown
  ```

## [Dropdown examples](/content/react/components/dropdowns#dropdown-examples/index.html)

Below are examples and variations of this dropdown component:

- **Account**  
  
  
  
  - **Olivia Rhye**  
  
  olivia@untitledui.com
  
  - **Caitlyn King**

## FAQs

### How do I position dropdowns relative to their trigger?

You can control the position of dropdowns using the `placement` prop on the `Dropdown.Popover` component. It accepts values like `"top"`, `"bottom"`, `"left"`, `"right"`, and their variations (e.g., `"top start"`, `"bottom right"`). The default placement is `"bottom right"`.

### Can I customize the appearance of dropdown items?

Yes, you can customize dropdown items using the `className` prop on `Dropdown.Item` components. You can also add icons using the `icon` prop, display addons (like keyboard shortcuts) with the `addon` prop, or create completely unstyled items using the `unstyled` prop.

### How do I handle selection in dropdowns?

You can handle selection by using the `onSelectionChange` prop on the `Dropdown.Menu` component, which provides a callback function that receives the selected key. The dropdown uses single selection mode by default and disallows empty selection.

### How do I organize dropdown items into sections?

You can organize dropdown items using `Dropdown.Section` components and separate them with `Dropdown.Separator`. You can also add section headers using `Dropdown.SectionHeader` to create well-organized dropdown menus.

### How do I make dropdowns accessible?

The dropdown component is built with accessibility in mind using React Aria. It supports keyboard navigation (arrow keys to navigate, Enter to select, Escape to close), proper ARIA attributes, focus management, and screen reader compatibility.

### Can I disable individual dropdown items?

Yes, you can disable individual dropdown items by setting the `isDisabled` prop to `true` on the `Dropdown.Item` component. Disabled items will have a different visual appearance and won't respond to user interactions.