Dropdown

Menu that opens on click with keyboard navigation.

Usage

tsx

import { Dropdown } from "fromsrc/client";

<Dropdown
  trigger={<button>open menu</button>}
  items={[
    { label: "edit", onClick: () => {} },
    { label: "delete", onClick: () => {} },
  ]}
/>;

Items

Each item can have a label, icon, click handler, and states.

tsx

const items = [
  { label: "copy", icon: <CopyIcon />, onClick: handleCopy },
  { label: "share", onClick: handleShare },
  "separator",
  { label: "delete", danger: true, onClick: handleDelete },
  { label: "archived", disabled: true },
];

Alignment

Start

Default alignment to the left.

tsx

<Dropdown align="start" trigger={<button>menu</button>} items={items} />

End

Align to the right.

tsx

<Dropdown align="end" trigger={<button>menu</button>} items={items} />

Features

Closes on outside click
Closes on Escape key
Keyboard navigation with arrow keys
Enter to select item
Disabled items are not selectable
Danger styling for destructive actions

Props

prop	type	default	description
trigger	ReactNode	required	Element that opens the menu
items	(DropdownItem \| "separator")[]	required	Menu items
align	"start" \| "end"	"start"	Horizontal alignment

DropdownItem

prop	type	default	description
label	string	required	Item text
icon	ReactNode	-	Optional icon
onClick	() => void	-	Click handler
disabled	boolean	false	Disable interaction
danger	boolean	false	Destructive action styling

Menu that opens on click with keyboard navigation.

Usage

tsx

import { Dropdown } from "fromsrc/client";

<Dropdown
  trigger={<button>open menu</button>}
  items={[
    { label: "edit", onClick: () => {} },
    { label: "delete", onClick: () => {} },
  ]}
/>;

Items

Each item can have a label, icon, click handler, and states.

tsx

const items = [
  { label: "copy", icon: <CopyIcon />, onClick: handleCopy },
  { label: "share", onClick: handleShare },
  "separator",
  { label: "delete", danger: true, onClick: handleDelete },
  { label: "archived", disabled: true },
];

Alignment

Start

Default alignment to the left.

tsx

<Dropdown align="start" trigger={<button>menu</button>} items={items} />

End

Align to the right.

tsx

<Dropdown align="end" trigger={<button>menu</button>} items={items} />

Features

Closes on outside click
Closes on Escape key
Keyboard navigation with arrow keys
Enter to select item
Disabled items are not selectable
Danger styling for destructive actions

Props

prop	type	default	description
trigger	ReactNode	required	Element that opens the menu
items	(DropdownItem \| "separator")[]	required	Menu items
align	"start" \| "end"	"start"	Horizontal alignment

DropdownItem

prop	type	default	description
label	string	required	Item text
icon	ReactNode	-	Optional icon
onClick	() => void	-	Click handler
disabled	boolean	false	Disable interaction
danger	boolean	false	Destructive action styling