Dropdown

Dropdowns display a list of choices that can be selected by the user. They're commonly used for menus, action lists, and navigation.

Overview

The Dropdown component provides a flexible way to display contextual actions or navigation options. It supports icons, disabled states, and proper keyboard navigation for accessibility.

Basic Dropdown

A simple dropdown triggered by a button with basic menu items.

import { Dropdown, type DropdownItem } from '@/components/ui/Dropdown';
import { Button } from '@/components/ui/Button';

const basicItems: DropdownItem[] = [
  { label: 'Profile', href: '/profile' },
  { label: 'Settings', href: '/settings' },
  { label: 'Help', href: '/help' },
  { label: 'Logout', href: '/logout' },
];

<Dropdown
  trigger={<Button variant="secondary">User Menu ↓</Button>}
  items={basicItems}
  onItemClick={handleItemClick}
/>

Variants

Dropdown with Icons

Dropdowns can include icons next to menu items for better visual recognition.

const iconItems: DropdownItem[] = [
  { label: 'Edit', href: '/edit', icon: '✏️' },
  { label: 'Copy', href: '/copy', icon: '📋' },
  { label: 'Share', href: '/share', icon: '🔗' },
  { label: 'Delete', href: '/delete', icon: '🗑️', disabled: true },
];

<Dropdown
  trigger={<Button variant="ghost">Actions ⚙️</Button>}
  items={iconItems}
  onItemClick={handleItemClick}
/>

Right-Aligned Dropdown

Dropdowns can be aligned to the right edge of the trigger element.

<Dropdown
  trigger={<Button variant="primary">Context Menu</Button>}
  items={contextMenuItems}
  align="right"
  onItemClick={handleItemClick}
/>

Text Trigger

Dropdowns can be triggered by any element, not just buttons.

<Dropdown
  trigger={
    <span style={{ 
      color: 'var(--text-brand)', 
      cursor: 'pointer',
      textDecoration: 'underline'
    }}>
      More options ▼
    </span>
  }
  items={basicItems}
  onItemClick={handleItemClick}
/>

Props & API

Component Props

Available props for customizing the Dropdown component.

interface DropdownItem {
  label: string;
  href: string;
  icon?: React.ReactNode;
  disabled?: boolean;
}

interface DropdownProps {
  trigger: React.ReactNode;        // Element that triggers the dropdown
  items: DropdownItem[];           // Array of dropdown menu items
  className?: string;              // Additional CSS classes
  align?: 'left' | 'right';        // Alignment of dropdown menu
  onItemClick?: (item: DropdownItem) => void; // Callback for item clicks
}

Props Description

  • trigger: The element that opens the dropdown when clicked
  • items: Array of objects defining each menu item
  • align: Controls which edge of the trigger the menu aligns to
  • onItemClick: Function called when a menu item is selected
  • className: Additional CSS classes for styling

Accessibility

The Dropdown component includes comprehensive accessibility features:

  • Keyboard Navigation: Arrow keys, Enter, and Escape work as expected
  • Focus Management: Proper focus indicators and tab order
  • Screen Reader Support: ARIA attributes for menu structure
  • Click Outside: Automatically closes when clicking outside
  • Disabled States: Properly marks disabled items for assistive technology

Best Practices

  • Keep it short: Limit menu items to 7-10 options for usability
  • Logical grouping: Use separators or grouping for complex menus
  • Clear labels: Use descriptive, action-oriented labels
  • Consistent placement: Keep dropdown alignment consistent across your interface
  • Visual indicators: Include icons or arrows to indicate dropdown functionality