Dropdown Menu
A Dropdown Menu component is a UI element that allows users to select an option from a list that appears when the user clicks or hovers over a button or link. This component helps save space on the interface by displaying additional options only when needed. Dropdown menus are commonly used for navigation, settings, or forms, enabling users to choose from multiple choices in a clean and organized manner.
# Demo
Basic Menu
Simple menu with basic items and actions.
Menu Sizes
Menus in different sizes for various contexts.
Nested Menus
Multi-level menus with nested submenus.
Menu Alignment
Menus with different alignment options.
Context Menus
Contextual menus for different scenarios and use cases.
Table Row Actions
John Doe
File Actions
document.pdf
Card Actions
Project Alpha
Active project with 5 tasks
Custom Styled Menus
Menus with custom styling and appearances.
Menu with Separators
Organized menus using separators to group related items.
Interactive Menu Demo
Try the menus above and see the actions logged below.
Last Action
No action selected yet
Action History
No actions yet
Menu Best Practices
Guidelines for effective menu design and implementation.
✅ Do
- • Group related items together with separators
- • Use clear, descriptive menu item titles
- • Provide keyboard shortcuts for common actions
- • Use appropriate icons to enhance recognition
- • Limit nesting to 2-3 levels maximum
- • Consider menu alignment based on trigger position
- • Use consistent menu sizes within the same context
❌ Don't
- • Overcrowd menus with too many items
- • Use vague or generic menu item labels
- • Create deeply nested menu structures
- • Mix different menu sizes inconsistently
- • Forget to handle menu item click actions
- • Use menus for single-action buttons
- • Ignore keyboard accessibility
Menu State Summary
Current state of interactive menu examples.
Total Actions
0
Menu interactions
Last Action
None
Most recent
Favorites
0
Starred items
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| size | MenuSize | Optional | Size of the menu. |
| title | React.ReactNode | Optional | Title for the menu. |
| side | 'top' | 'bottom' | 'right' | 'left' | Optional | Side where menu appears. |
| align | 'start' | 'end' | 'center' | Optional | Alignment of the menu. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| triggerClassName | string | ' ' | You can customise by passing tailwind classes. |
| titleClassName | string | ' ' | You can customise by passing tailwind classes. |
| trigger | React.ReactNode | Required | Trigger element for the menu. |
| children | React.ReactNode | Required | Menu content. |
# Tags