Recipes
Dropdown design patterns
A collection of polished, accessible dropdown menus built with Tailwind CSS. Copy, paste, and adapt for your own projects.
Simple list dropdown
A minimal dropdown with a single list of actions. Ideal for context menus or quick settings.
Grouped with icons
Sections separated by dividers with leading icons for quick visual scanning.
Account
Support
Nested submenu
A dropdown with a fly-out submenu for hierarchical navigation.
Searchable select
A dropdown with an inline search input for filtering long lists.
Usage notes
- Keyboard: Arrow keys navigate items, Enter selects, Escape closes.
- Focus trap: Keep focus inside the dropdown while open for accessibility.
- Positioning: Use absolute positioning with overflow detection to flip above when near viewport bottom.