Dropdown Menus & Popovers
Interactive dropdown menus, context menus, and popover components for navigation and actions.
Basic Dropdown Menu
<div class="relative inline-block text-left">
<button type="button" class="dropdown-trigger inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700">
Options
<svg class="dropdown-arrow -mr-1 ml-2 h-5 w-5">...</svg>
</button>
<div class="dropdown-menu hidden absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
<div class="py-1">
<a href="#" class="dropdown-item text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">Account settings</a>
<a href="#" class="dropdown-item text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">Support</a>
</div>
</div>
</div>User Dropdown
Context Menu Dropdown
Popover
Notification Dropdown
Usage Guidelines
Accessibility
- • Use proper ARIA attributes (aria-expanded, aria-haspopup, role)
- • Ensure keyboard navigation (Tab, Enter, Escape)
- • Provide focus management and visible focus indicators
- • Use semantic HTML structure
Best Practices
- • Close dropdowns when clicking outside or pressing Escape
- • Position dropdowns to stay within viewport bounds
- • Use appropriate z-index values to ensure proper layering
- • Provide visual feedback for hover and active states
- • Keep dropdown content organized and scannable
Interactive Features
- • Click trigger buttons to show/hide dropdowns
- • Arrow icons rotate when dropdown is open
- • Click outside dropdown area to close
- • Press Escape key to close active dropdowns