DropdownMenu

Menu of actions triggered by a button. Supports items, separators, groups, sub-menus, and checkbox items.

Example

Props

DropdownMenu.Root

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls menu visibility (bindable)
`children`	`Snippet`	—	Trigger and content

DropdownMenu.Trigger

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Trigger element

DropdownMenu.Content

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred side
`sideOffset`	`number`	`4`	Distance from trigger in px
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Menu items

DropdownMenu.Item

Prop	Type	Default	Description
`onSelect`	`() => void`	—	Callback when item is selected
`disabled`	`boolean`	—	Disables the item
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Item content

DropdownMenu.Separator

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes

DropdownMenu.Group / DropdownMenu.GroupHeading

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Group content / heading text

Usage

<script>
  import { DropdownMenu, Button } from '@chrissnell/chonky-ui';

  let open = $state(false);
</script>

<DropdownMenu.Root bind:open>
  <DropdownMenu.Trigger>
    <Button>Actions</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item onSelect={() => console.log('edit')}>Edit</DropdownMenu.Item>
    <DropdownMenu.Item onSelect={() => console.log('copy')}>Copy</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item disabled>Archive</DropdownMenu.Item>
    <DropdownMenu.Item>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>