Dropdown Submenu
Navigation
Overlay
Multi-level dropdown with nested submenus for complex menu structures.
Preview
Multi-level dropdown with nested submenus
Props
Component API reference
DropdownSubmenu
| Prop | Type | Default | Description |
|---|---|---|---|
items | MenuItem[] | defaultItems | Menu items to display |
onItemClick | (item) => void | — | Callback when a menu item is clicked |
onSubmenuItemClick | (parentId, item) => void | — | Callback when a submenu item is clicked |
className | string | — | Additional CSS classes |
MenuItem Types
MenuItemWithSubmenu
{ id: string, icon: LucideIcon, label: string, hasSubmenu: true, submenuItems: SubMenuItem[] }
MenuItemSimple
{ id: string, icon: LucideIcon, label: string, hasSubmenu?: false, shortcut?: string[] }
MenuItemSeparator
{ type: 'separator' }
SubMenuItem
{ id: string, icon?: LucideIcon, label: string, checked?: boolean }
Usage
Import and implementation examples
import { DropdownSubmenu } from '@/components/ui/dropdown-submenu'
import { Eye, Settings, Grid3X3, List } from 'lucide-react'
// Basic usage
<DropdownSubmenu />
// Custom menu items
const customItems = [
{
id: 'view',
icon: Eye,
label: 'View',
hasSubmenu: true,
submenuItems: [
{ id: 'grid', icon: Grid3X3, label: 'Grid', checked: true },
{ id: 'list', icon: List, label: 'List' }
]
},
{ type: 'separator' },
{ id: 'settings', icon: Settings, label: 'Settings', shortcut: ['⌘', ','] }
]
<DropdownSubmenu
items={customItems}
onItemClick={(item) => console.log('Item clicked:', item)}
onSubmenuItemClick={(parentId, item) => {
console.log('Submenu item clicked:', parentId, item)
}}
/>Features
Built-in functionality
- Nested menus: View, Sort, and Filter submenus
- Hover expansion: Submenus open on hover
- Check marks: Visual selection indicators
- Icon support: Icons for visual clarity
- Keyboard shortcuts: Display shortcut hints
- Smooth transitions: Animated hover states
- Customizable: Custom items and colors
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="menu" for menu containersrole="menuitem" for menu itemsaria-haspopup for submenu triggersaria-expanded for open stateKeyboard Navigation
| Key | Action |
|---|---|
| Arrow Down | Move to next item |
| Arrow Up | Move to previous item |
| Arrow Right | Open submenu |
| Arrow Left | Close submenu |
| Enter | Select item |
| Escape | Close menu |
Notes
- Focus is trapped within menu
- Submenu closes when moving away
- Screen reader announces menu structure