Installation
You can add this dropdown component using our CLI or manually:
npx untitledui add dropdown
Dropdown examples
Below are examples and variations of this dropdown component:
FAQs
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".
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.
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.
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.
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.
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.