Sectioned Dropdown

Navigation

Overlay

Organized dropdown menu with sections, keyboard shortcuts, and danger actions.

Preview

Dropdown with organized sections and keyboard shortcuts

Quick Actions

Edit

Props

Component API reference

SectionedDropdown

Prop	Type	Default	Description
`sections`	`Section[]`	`Default sections`	Sections with menu items
`onItemClick`	`(item: MenuItem) => void`	—	Called when menu item is clicked
`className`	`string`	—	Additional CSS classes

Types

interface MenuItem { id: string icon: LucideIcon label: string shortcut?: string[] danger?: boolean } interface Section { id: string title: string items: MenuItem[] }

Usage

Import and implementation examples

import { SectionedDropdown } from '@/components/ui/sectioned-dropdown'
import { Plus, Upload, Copy, Edit3, Trash2, Link } from 'lucide-react'

// Basic usage with defaults
<SectionedDropdown />

// With custom sections
const sections = [
  {
    id: 'quick-actions',
    title: 'Quick Actions',
    items: [
      { id: 'new', icon: Plus, label: 'New file', shortcut: ['⌘', 'N'] },
      { id: 'upload', icon: Upload, label: 'Upload', shortcut: ['⌘', 'U'] },
    ]
  },
  {
    id: 'edit',
    title: 'Edit',
    items: [
      { id: 'duplicate', icon: Copy, label: 'Duplicate', shortcut: ['⌘', 'D'] },
      { id: 'rename', icon: Edit3, label: 'Rename', shortcut: ['Enter'] },
      { id: 'delete', icon: Trash2, label: 'Delete', shortcut: ['⌫'], danger: true },
    ]
  },
  {
    id: 'share',
    title: 'Share',
    items: [
      { id: 'copy-link', icon: Link, label: 'Copy link' },
    ]
  }
]

<SectionedDropdown
  sections={sections}
  onItemClick={(item) => console.log('Clicked:', item.id)}
/>

This block is self-contained (no UI component dependencies)

Features

Built-in functionality

Section headers: Organized grouping by category
Grouped items: Quick Actions, Edit, Share sections
Danger actions: Special styling for destructive actions
Icons: Visual icons for all menu items
Keyboard shortcuts: Display shortcuts (⌘N, ⌘D, etc.)
Smooth transitions: Hover states with smooth animations
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses role="menu" for dropdownrole="menuitem" for itemsaria-labelledby for section headersaria-disabled for disabled items

Keyboard Navigation

Key	Action
`Enter/Space`	Activate menu item
`Escape`	Close dropdown
`Arrow Up/Down`	Navigate items
`Tab`	Move to next item

Notes

Keyboard shortcuts are announced to screen readers
Danger items have appropriate warning styling
Focus trapped within open dropdown

Related Components

Dropdown Menu Context Menu Menubar