Leaf UI
  • English

      • Dropdown

      Group additional actions in a menu.

      Action menu

      Live previewAction menu
      basic.tsx
      import { Button, Dropdown, type DropdownItem, useMessage } from '@sudden3/leaf-ui';
import { ChevronDown, Copy, Pencil, Trash2 } from 'lucide-react';

const items: DropdownItem[] = [
  { key: 'edit', label: 'Edit', icon: <Pencil size={15} /> },
  { key: 'copy', label: 'Copy', icon: <Copy size={15} /> },
  { key: 'archive', label: 'Archive', disabled: true },
  { key: 'divider', type: 'divider' },
  { key: 'delete', label: 'Delete', icon: <Trash2 size={15} />, danger: true },
];
export function DropdownBasic() {
  const { message, contextHolder } = useMessage();
  return (
    <>
      <Dropdown items={items} onSelect={(key) => message.info(key)}>
        <Button variant="outline" endIcon={<ChevronDown size={16} />}>
          More actions
        </Button>
      </Dropdown>
      {contextHolder}
    </>
  );
}
      PropertyTypeDefaultDescription
      itemsreadonly DropdownItem[]RequiredMenu entries
      childrenReactElement<ButtonHTMLAttributes<HTMLButtonElement>>RequiredA single Leaf Button or native button
      open / defaultOpenbooleanfalseControlled / initial open state
      disabledbooleanfalseDisable the trigger
      onOpenChange(open: boolean) => void—Open-state changes
      onSelect(key: string) => void—Called when an enabled menu entry is selected
      placement'top-start' | 'top-end' | 'bottom-start' | 'bottom-end''bottom-start'Popup placement
      popupWidth / popupMaxWidthnumber | string— / 420Popup width / maximum width
      PropertyTypeDefaultDescription
      keystringRequiredUnique key
      label / iconReactNode—Content and icon
      type'item' | 'divider''item'Menu entry or divider
      disabled / dangerbooleanfalseDisabled / danger action
      onClick() => void—Runs when the item is selected

      Types

      Import types when defining reusable component props or assembling options.

      import type { DropdownProps, DropdownItem } from '@sudden3/leaf-ui';

      Usage notes

      Press Down / Up on the trigger to open. Use arrow keys, Home, End or the first letter to navigate, Enter to select, and Escape to close and restore focus. Disabled entries and dividers are skipped.