DropDownMenu Component

Overview

The DropDownMenu component provides a dropdown menu interface for displaying actions, options, and navigation items. It's commonly used for action menus, settings panels, and any interface that needs a compact menu of options.

Basic Usage

import { DropDownMenu } from '@dashflowx/core'

export default function DropDownMenuExample() {
  const dropdownItems = [
    { type: 'label', title: 'Actions' },
    { type: 'item', title: 'Edit', shortcut: '⌘E' },
    { type: 'item', title: 'Copy', shortcut: '⌘C' },
    { type: 'seperator' },
    { type: 'item', title: 'Delete', shortcut: '⌘⌫' }
  ];
  
  return (
    <DropDownMenu 
      actionButton="Open Menu"
      dropdownItems={dropdownItems}
    />
  )
}

Preview:

Loading Button...

Props

Prop	Type	Default	Description
`actionButton`	`string`	`'Open Menu'`	The text for the trigger button
`dropdownItems`	`Array`	`[]`	Array of dropdown menu items
`className`	`string`	`''`	Additional CSS classes for the container

interface DropdownItem {
  type: 'label' | 'seperator' | 'group';
  title?: string | JSX.Element;
  shortcut?: string | JSX.Element;
  children?: DropdownItemChild[];
}

interface DropdownItemChild {
  type: 'item' | 'subMenu';
  title: string | JSX.Element;
  shortcut?: string | JSX.Element;
  subChildren?: DropdownSubChild[];
}

interface DropdownSubChild {
  title: string | JSX.Element;
}

Examples

const basicItems = [
  { type: 'label', title: 'Actions' },
  { type: 'item', title: 'Edit', shortcut: '⌘E' },
  { type: 'item', title: 'Copy', shortcut: '⌘C' },
  { type: 'seperator' },
  { type: 'item', title: 'Delete', shortcut: '⌘⌫' }
];

<DropDownMenu 
  actionButton="Actions"
  dropdownItems={basicItems}
/>

Preview:

Loading Button...

const fileItems = [
  { type: 'label', title: 'File' },
  { type: 'item', title: 'New', shortcut: '⌘N' },
  { type: 'item', title: 'Open', shortcut: '⌘O' },
  { type: 'item', title: 'Save', shortcut: '⌘S' },
  { type: 'seperator' },
  { type: 'item', title: 'Export', shortcut: '⌘E' },
  { type: 'item', title: 'Print', shortcut: '⌘P' }
];

<DropDownMenu 
  actionButton="File"
  dropdownItems={fileItems}
/>

Preview:

Loading Button...

const userItems = [
  { type: 'label', title: 'Account' },
  { type: 'item', title: 'Profile', shortcut: '⌘P' },
  { type: 'item', title: 'Settings', shortcut: '⌘,' },
  { type: 'seperator' },
  { type: 'item', title: 'Help', shortcut: '⌘?' },
  { type: 'seperator' },
  { type: 'item', title: 'Sign Out', shortcut: '⌘Q' }
];

<DropDownMenu 
  actionButton="👤 User"
  dropdownItems={userItems}
/>

Preview:

Loading Button...

const groupedItems = [
  { 
    type: 'group', 
    title: 'Edit',
    children: [
      { type: 'item', title: 'Undo', shortcut: '⌘Z' },
      { type: 'item', title: 'Redo', shortcut: '⌘Y' },
      { type: 'seperator' },
      { type: 'item', title: 'Cut', shortcut: '⌘X' },
      { type: 'item', title: 'Copy', shortcut: '⌘C' },
      { type: 'item', title: 'Paste', shortcut: '⌘V' }
    ]
  },
  { 
    type: 'group', 
    title: 'View',
    children: [
      { type: 'item', title: 'Zoom In', shortcut: '⌘+' },
      { type: 'item', title: 'Zoom Out', shortcut: '⌘-' },
      { type: 'item', title: 'Reset Zoom', shortcut: '⌘0' }
    ]
  }
];

<DropDownMenu 
  actionButton="Options"
  dropdownItems={groupedItems}
/>

Preview:

Loading Button...

<DropDownMenu 
  actionButton="Custom Menu"
  dropdownItems={basicItems}
  className="border-2 border-blue-500 rounded-xl"
/>

Preview:

Loading Button...

Common Use Cases

const actionItems = [
  { type: 'label', title: 'Actions' },
  { type: 'item', title: 'Edit', shortcut: '⌘E' },
  { type: 'item', title: 'Duplicate', shortcut: '⌘D' },
  { type: 'item', title: 'Move', shortcut: '⌘M' },
  { type: 'seperator' },
  { type: 'item', title: 'Archive', shortcut: '⌘A' },
  { type: 'item', title: 'Delete', shortcut: '⌘⌫' }
];

<DropDownMenu 
  actionButton="⚙️ Actions"
  dropdownItems={actionItems}
/>

const settingsItems = [
  { type: 'label', title: 'Settings' },
  { type: 'item', title: 'Preferences', shortcut: '⌘,' },
  { type: 'item', title: 'Keyboard Shortcuts', shortcut: '⌘/' },
  { type: 'seperator' },
  { type: 'item', title: 'Theme', shortcut: '⌘T' },
  { type: 'item', title: 'Language', shortcut: '⌘L' },
  { type: 'seperator' },
  { type: 'item', title: 'About', shortcut: '⌘I' }
];

<DropDownMenu 
  actionButton="⚙️ Settings"
  dropdownItems={settingsItems}
/>

const navItems = [
  { type: 'label', title: 'Navigation' },
  { type: 'item', title: 'Dashboard', shortcut: '⌘1' },
  { type: 'item', title: 'Projects', shortcut: '⌘2' },
  { type: 'item', title: 'Tasks', shortcut: '⌘3' },
  { type: 'item', title: 'Calendar', shortcut: '⌘4' },
  { type: 'seperator' },
  { type: 'item', title: 'Search', shortcut: '⌘K' },
  { type: 'item', title: 'Notifications', shortcut: '⌘N' }
];

<DropDownMenu 
  actionButton="🧭 Navigate"
  dropdownItems={navItems}
/>

const filterItems = [
  { type: 'label', title: 'Filter By' },
  { type: 'item', title: 'All Items', shortcut: '⌘A' },
  { type: 'item', title: 'Recent', shortcut: '⌘R' },
  { type: 'item', title: 'Favorites', shortcut: '⌘F' },
  { type: 'seperator' },
  { type: 'item', title: 'By Date', shortcut: '⌘D' },
  { type: 'item', title: 'By Type', shortcut: '⌘T' },
  { type: 'item', title: 'By Status', shortcut: '⌘S' },
  { type: 'seperator' },
  { type: 'item', title: 'Clear Filters', shortcut: '⌘⌫' }
];

<DropDownMenu 
  actionButton="🔍 Filter"
  dropdownItems={filterItems}
/>

const exportItems = [
  { type: 'label', title: 'Export' },
  { type: 'item', title: 'PDF', shortcut: '⌘P' },
  { type: 'item', title: 'Excel', shortcut: '⌘E' },
  { type: 'item', title: 'CSV', shortcut: '⌘C' },
  { type: 'seperator' },
  { type: 'item', title: 'Print', shortcut: '⌘⌘P' },
  { type: 'item', title: 'Email', shortcut: '⌘M' },
  { type: 'seperator' },
  { type: 'item', title: 'Share Link', shortcut: '⌘L' }
];

<DropDownMenu 
  actionButton="📤 Export"
  dropdownItems={exportItems}
/>

Best Practices

1. Clear Menu Labels

Use clear and descriptive labels for menu items.

// ✅ Good - Clear labels
const items = [
  { type: 'label', title: 'File Operations' },
  { type: 'item', title: 'Save Document', shortcut: '⌘S' },
  { type: 'item', title: 'Export as PDF', shortcut: '⌘E' }
];

// ❌ Avoid - Unclear labels
const items = [
  { type: 'label', title: 'File' },
  { type: 'item', title: 'Save', shortcut: '⌘S' },
  { type: 'item', title: 'Export', shortcut: '⌘E' }
];

2. Logical Grouping

Group related menu items together with separators.

// ✅ Good - Logical grouping
const items = [
  { type: 'label', title: 'Edit' },
  { type: 'item', title: 'Cut', shortcut: '⌘X' },
  { type: 'item', title: 'Copy', shortcut: '⌘C' },
  { type: 'item', title: 'Paste', shortcut: '⌘V' },
  { type: 'seperator' },
  { type: 'item', title: 'Delete', shortcut: '⌘⌫' }
];

3. Consistent Shortcuts

Use consistent keyboard shortcuts across your application.

// ✅ Good - Consistent shortcuts
const items = [
  { type: 'item', title: 'Copy', shortcut: '⌘C' },
  { type: 'item', title: 'Paste', shortcut: '⌘V' },
  { type: 'item', title: 'Cut', shortcut: '⌘X' }
];

4. Appropriate Menu Depth

Avoid too many nested submenus.

// ✅ Good - Reasonable depth
const items = [
  { 
    type: 'group', 
    title: 'Format',
    children: [
      { type: 'item', title: 'Bold', shortcut: '⌘B' },
      { type: 'item', title: 'Italic', shortcut: '⌘I' }
    ]
  }
];

// ❌ Avoid - Too deep nesting
const items = [
  { 
    type: 'group', 
    title: 'Format',
    children: [
      { 
        type: 'subMenu', 
        title: 'Text',
        children: [
          { 
            type: 'subMenu', 
            title: 'Style',
            children: [
              { type: 'item', title: 'Bold', shortcut: '⌘B' }
            ]
          }
        ]
      }
    ]
  }
];

5. Contextual Actions

Show only relevant actions for the current context.

// ✅ Good - Contextual actions
const getContextMenuItems = (context: string) => {
  switch (context) {
    case 'file':
      return fileItems;
    case 'text':
      return textItems;
    case 'image':
      return imageItems;
    default:
      return basicItems;
  }
};

Customization

Custom Styling

You can customize the dropdown menu appearance using CSS classes:

<DropDownMenu 
  actionButton="Custom Styled"
  dropdownItems={items}
  className="border-2 border-purple-500 rounded-xl"
/>

Different Themes

Use different themes for different contexts:

// Light theme
<DropDownMenu 
  actionButton="Light Theme"
  dropdownItems={items}
  className="bg-white border-gray-200"
/>

// Dark theme
<DropDownMenu 
  actionButton="Dark Theme"
  dropdownItems={items}
  className="bg-gray-900 border-gray-700 text-white"
/>

Size Variations

Use different sizes for different emphasis levels:

// Small dropdown
<DropDownMenu 
  actionButton="Small"
  dropdownItems={items}
  className="w-40"
/>

// Large dropdown
<DropDownMenu 
  actionButton="Large"
  dropdownItems={items}
  className="w-80"
/>

Advanced Usage

Load menu items dynamically based on context:

const [menuItems, setMenuItems] = useState([]);

useEffect(() => {
  // Load menu items based on current context
  const contextItems = getMenuItemsForContext(currentContext);
  setMenuItems(contextItems);
}, [currentContext]);

Handle menu item actions:

const handleMenuAction = (action: string) => {
  switch (action) {
    case 'copy':
      copyToClipboard();
      break;
    case 'paste':
      pasteFromClipboard();
      break;
    case 'delete':
      deleteItem();
      break;
    default:
      console.log('Unknown action:', action);
  }
};

Show/hide menu items based on conditions:

const getConditionalMenuItems = (hasSelection: boolean, isEditable: boolean) => {
  const items = [];
  
  if (hasSelection) {
    items.push({ type: 'item', title: 'Copy', shortcut: '⌘C' });
  }
  
  if (isEditable) {
    items.push({ type: 'item', title: 'Paste', shortcut: '⌘V' });
  }
  
  return items;
};

Implement keyboard navigation for accessibility:

const handleKeyDown = (event: KeyboardEvent) => {
  switch (event.key) {
    case 'ArrowDown':
      // Navigate to next item
      break;
    case 'ArrowUp':
      // Navigate to previous item
      break;
    case 'Enter':
      // Activate current item
      break;
    case 'Escape':
      // Close menu
      break;
  }
};

ContextMenu: For right-click menus
Menu: For general menus
Popover: For popup content
Button: For trigger buttons
Tooltip: For menu item tooltips

API Reference

For the complete API reference and advanced usage patterns, see the DropDownMenu API documentation.

DropDownMenu Component

Overview

Basic Usage

Props

Examples

File Operations Menu

User Profile Menu

Grouped Menu Items

Common Use Cases

Action Menu

Settings Menu

Navigation Menu

Filter Menu

Export Menu

Best Practices

1. Clear Menu Labels

2. Logical Grouping

3. Consistent Shortcuts

4. Appropriate Menu Depth

5. Contextual Actions

Customization

Custom Styling

Different Themes

Size Variations

Advanced Usage

Dynamic Menu Items

Menu Item Actions

Conditional Menu Items

Keyboard Navigation

API Reference

Overview

Basic Usage

Props

Dropdown Item Structure

Examples

Basic Dropdown Menu

File Operations Menu

User Profile Menu

Grouped Menu Items

Custom Styled Dropdown Menu

Common Use Cases

Action Menu

Settings Menu

Navigation Menu

Filter Menu

Export Menu

Best Practices

1. Clear Menu Labels

2. Logical Grouping

3. Consistent Shortcuts

4. Appropriate Menu Depth

5. Contextual Actions

Customization

Custom Styling

Different Themes

Size Variations

Advanced Usage

Dynamic Menu Items

Menu Item Actions

Conditional Menu Items

Keyboard Navigation

Related Components

API Reference