Dropdown

A fast and easy dropdown component extended from Menu and Button components. Provides a simplified API for creating common dropdown menus with less customization complexity. For advanced use cases, consider using the Menu component directly.

Installation

import { Dropdown } from '@geckoui/geckoui';

Basic Usage

import { Dropdown } from '@geckoui/geckoui';

const items = [
  { label: 'Edit', onClick: () => console.log('Edit clicked') },
  { label: 'Duplicate', onClick: () => console.log('Duplicate clicked') },
  { label: 'Delete', onClick: () => console.log('Delete clicked') }
];

function Example() {
  return <Dropdown items={items}>Actions</Dropdown>;
}

Props API

Prop	Type	Default	Description
`items`	`DropdownItem[]`	-	Array of menu items (required)
`children`	`ReactNode`	-	Button content/label
`anchor`	`Placement`	`'bottom start'`	Menu position relative to button
`className`	`string`	-	CSS class for dropdown button
`menuClassName`	`string`	-	CSS class for dropdown menu
`iconClassName`	`string`	-	CSS class for arrow icon
`hideArrowIcon`	`boolean`	`false`	Hide the dropdown arrow icon
`data-*`	`string`	-	Data attributes

DropdownItem

Property	Type	Description
`label`	`ReactNode \| FC`	Display text or component
`onClick`	`() => void`	Click handler
`disabled`	`boolean`	Disable the item
`className`	`string`	CSS class for the item

Examples

Custom Button Style

<Dropdown
  items={items}
  className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
>
  My Account
</Dropdown>

Without Arrow Icon

<Dropdown items={items} hideArrowIcon>
  Menu
</Dropdown>

<Dropdown
  items={items}
  menuClassName="min-w-[200px] shadow-lg border"
>
  Create New
</Dropdown>

Custom Item Styling

const items = [
  {
    label: 'Save',
    onClick: () => console.log('Save'),
    className: 'text-green-600 font-medium'
  },
  {
    label: 'Cancel',
    onClick: () => console.log('Cancel'),
    className: 'text-gray-600'
  },
  {
    label: 'Delete',
    onClick: () => console.log('Delete'),
    className: 'text-red-600 font-medium'
  }
];

<Dropdown items={items}>Options</Dropdown>

Anchor Position

// Open upward from top
<Dropdown items={items} anchor="top start">
  Top Start
</Dropdown>

// Align to right edge
<Dropdown items={items} anchor="bottom end">
  Bottom End
</Dropdown>

With Icons in Labels

import { Edit, Copy, Trash } from 'lucide-react';

const items = [
  {
    label: (
      <div className="flex items-center gap-2">
        <Edit className="size-4" />
        <span>Edit</span>
      </div>
    ),
    onClick: () => console.log('Edit')
  },
  {
    label: (
      <div className="flex items-center gap-2">
        <Copy className="size-4" />
        <span>Duplicate</span>
      </div>
    ),
    onClick: () => console.log('Duplicate')
  },
  {
    label: (
      <div className="flex items-center gap-2">
        <Trash className="size-4" />
        <span>Delete</span>
      </div>
    ),
    onClick: () => console.log('Delete')
  }
];

<Dropdown items={items}>Actions</Dropdown>

Disabled Items

const items = [
  { label: 'Available Action', onClick: () => {} },
  { label: 'Disabled Action', onClick: () => {}, disabled: true },
  { label: 'Another Action', onClick: () => {} }
];

<Dropdown items={items}>Actions</Dropdown>

Click: Toggle dropdown menu
Enter/Space: Open dropdown when focused
Arrow Up/Down: Navigate items
Enter: Select focused item
Escape: Close dropdown

Behavior

Auto-Focus Management

Automatically blurs the button after opening to prevent focus outline
Prevents Enter key from keeping button focused

The anchor prop controls menu placement using HeadlessUI's anchor positioning:

"bottom start" (default) - Below button, aligned to left
"bottom end" - Below button, aligned to right
"top start" - Above button, aligned to left
"top end" - Above button, aligned to right

Use the Menu component directly when you need:

Menu sections with headings
Menu separators
More complex menu item content
Advanced styling per item with render functions
Custom menu button elements

Styling

The component uses BEM-style class names:

GeckoUIDropdown__button - Button element
GeckoUIDropdown__icon - Arrow icon
GeckoUIDropdown__menu - Menu container
GeckoUIDropdown__menu-item - Individual menu items

Accessibility

Keyboard navigation fully supported
ARIA attributes automatically applied
Focus management
Works with screen readers

Menu - Advanced dropdown menus with more customization
Button - Standalone button component
Select - Form select input