Dropdown

A dropdown menu component built with Headless UI for actions and navigation.

Import

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

Basic Usage

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

<Dropdown trigger={<Button outline>Options</Button>}>
  <DropdownItem onClick={() => console.log('Edit')}>Edit</DropdownItem>
  <DropdownItem onClick={() => console.log('Duplicate')}>Duplicate</DropdownItem>
  <DropdownDivider />
  <DropdownItem onClick={() => console.log('Delete')} variant="danger">
    Delete
  </DropdownItem>
</Dropdown>

Props

Dropdown

Prop Type Default Description
trigger ReactNode required Element that opens dropdown
align 'left' | 'right' 'left' Horizontal alignment
position 'top' | 'bottom' 'bottom' Vertical position
children ReactNode required Dropdown content

DropdownItem

Prop Type Default Description
onClick () => void - Click handler
disabled boolean false Disable item
icon ReactNode - Icon on the left
variant 'default' | 'danger' 'default' Item style variant
children ReactNode required Item content

Alignment

Left Aligned (Default)

<Dropdown trigger={<Button>Menu</Button>} align="left">
  <DropdownItem>Option 1</DropdownItem>
  <DropdownItem>Option 2</DropdownItem>
</Dropdown>

Right Aligned

<Dropdown trigger={<Button>Menu</Button>} align="right">
  <DropdownItem>Option 1</DropdownItem>
  <DropdownItem>Option 2</DropdownItem>
</Dropdown>

Position

Bottom (Default)

<Dropdown trigger={<Button>Menu</Button>} position="bottom">
  <DropdownItem>Opens below</DropdownItem>
</Dropdown>

Top

<Dropdown trigger={<Button>Menu</Button>} position="top">
  <DropdownItem>Opens above</DropdownItem>
</Dropdown>

With Icons

import { EditIcon, CopyIcon, TrashIcon } from '@/components/icons';

<Dropdown trigger={<Button>Actions</Button>}>
  <DropdownItem icon={<EditIcon className="h-4 w-4" />}>
    Edit
  </DropdownItem>
  <DropdownItem icon={<CopyIcon className="h-4 w-4" />}>
    Duplicate
  </DropdownItem>
  <DropdownDivider />
  <DropdownItem icon={<TrashIcon className="h-4 w-4" />} variant="danger">
    Delete
  </DropdownItem>
</Dropdown>

User Menu Example

import { Avatar, Dropdown, DropdownItem, DropdownDivider } from '@/components/ui';
import { UserIcon, SettingsIcon, LogOutIcon } from '@/components/icons';

export function UserMenu({ user }) {
  return (
    <Dropdown
      trigger={<Avatar src={user.avatar} name={user.name} />}
      align="right"
    >
      <div className="px-4 py-2 text-sm text-zinc-500">
        Signed in as <strong>{user.email}</strong>
      </div>
      <DropdownDivider />
      <DropdownItem icon={<UserIcon className="h-4 w-4" />}>
        Profile
      </DropdownItem>
      <DropdownItem icon={<SettingsIcon className="h-4 w-4" />}>
        Settings
      </DropdownItem>
      <DropdownDivider />
      <DropdownItem icon={<LogOutIcon className="h-4 w-4" />} variant="danger">
        Sign Out
      </DropdownItem>
    </Dropdown>
  );
}

Table Row Actions

import { EllipsisVerticalIcon } from '@/components/icons';

<TableCell>
  <Dropdown
    trigger={
      <button className="p-1 hover:bg-zinc-100 rounded">
        <EllipsisVerticalIcon className="h-5 w-5" />
      </button>
    }
    align="right"
  >
    <DropdownItem onClick={() => handleEdit(row.id)}>Edit</DropdownItem>
    <DropdownItem onClick={() => handleView(row.id)}>View Details</DropdownItem>
    <DropdownDivider />
    <DropdownItem onClick={() => handleDelete(row.id)} variant="danger">
      Delete
    </DropdownItem>
  </Dropdown>
</TableCell>

Disabled Items

<Dropdown trigger={<Button>Menu</Button>}>
  <DropdownItem>Available Action</DropdownItem>
  <DropdownItem disabled>Coming Soon</DropdownItem>
</Dropdown>

Features