Ivaldi | ui | DropdownMenu

Example

Anatomy

<DropdownMenu.Root>
  <DropdownMenu.Trigger />
  <DropdownMenu.Portal>
    <DropdownMenu.Content>
      <DropdownMenu.Group>
        <DropdownMenu.Item />
        <DropdownMenu.Separator />
        <DropdownMenu.Sub>
          <DropdownMenu.SubTrigger />
          <DropdownMenu.SubContent>
            <DropdownMenu.Item />
          </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
        <DropdownMenu.Separator />
        <DropdownMenu.CheckboxItem />
        <DropdownMenu.RadioGroup>
          <DropdownMenu.RadioItem />
        </DropdownMenu.RadioGroup>
      </DropdownMenu.Group>
    </DropdownMenu.Content>
  </DropdownMenu.Portal>
</DropdownMenu.Root>

Usage

import { DropdownMenu } from '@ivaldi/ui'

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>New File</DropdownMenu.Item>
    <DropdownMenu.Item>Open</DropdownMenu.Item>
    <DropdownMenu.Item>Save</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>Close</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

With Submenus

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <Button>More Actions</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Open</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Sub>
      <DropdownMenu.SubTrigger>Share</DropdownMenu.SubTrigger>
      <DropdownMenu.SubContent>
        <DropdownMenu.Item>Copy Link</DropdownMenu.Item>
        <DropdownMenu.Item>Email</DropdownMenu.Item>
        <DropdownMenu.Item>Message</DropdownMenu.Item>
      </DropdownMenu.SubContent>
    </DropdownMenu.Sub>
  </DropdownMenu.Content>
</DropdownMenu.Root>

With Checkbox Items

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <Button>View Options</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.CheckboxItem checked={showToolbar}>
      Show Toolbar
    </DropdownMenu.CheckboxItem>
    <DropdownMenu.CheckboxItem checked={showPanel}>
      Show Panel
    </DropdownMenu.CheckboxItem>
    <DropdownMenu.Separator />
    <DropdownMenu.CheckboxItem checked={darkMode}>
      Dark Mode
    </DropdownMenu.CheckboxItem>
  </DropdownMenu.Content>
</DropdownMenu.Root>

With Radio Items

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <Button>Select Size</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.RadioGroup value={size} onValueChange={setSize}>
      <DropdownMenu.RadioItem value="sm">Small</DropdownMenu.RadioItem>
      <DropdownMenu.RadioItem value="md">Medium</DropdownMenu.RadioItem>
      <DropdownMenu.RadioItem value="lg">Large</DropdownMenu.RadioItem>
    </DropdownMenu.RadioGroup>
  </DropdownMenu.Content>
</DropdownMenu.Root>

With Icons

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <Button>File</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>
      <FileIcon className="mr-2 size-4" />
      New File
    </DropdownMenu.Item>
    <DropdownMenu.Item>
      <FolderIcon className="mr-2 size-4" />
      Open Folder
    </DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>
      <SaveIcon className="mr-2 size-4" />
      Save
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

With Different Colors

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <Button>Actions</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item color="primary">Primary Action</DropdownMenu.Item>
    <DropdownMenu.Item color="success">Approve</DropdownMenu.Item>
    <DropdownMenu.Item color="warning">Review</DropdownMenu.Item>
    <DropdownMenu.Item color="danger">Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Prop	Type	Default
`children`	`ReactNode`	—
`dir`	`enum`	—
`open`	`boolean`	—
`defaultOpen`	`boolean`	—
`onOpenChange`	`function`	—
`modal`	`boolean`	—

Prop	Type	Default

Prop	Type	Default

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—

Prop	Type	Default

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—
`inset`	`boolean`	—

Prop	Type	Default
`children`	`ReactNode`	—
`container`	`Element \| DocumentFragment`	—
`forceMount`	`true`	—

Prop	Type	Default
`value`	`string`	—
`className`	`string`	—
`children`	`ReactNode`	—
`onValueChange`	`function`	—
`asChild`	`boolean`	—

Prop	Type	Default

Prop	Type	Default

Prop	Type	Default
`className`	`string`	—
`asChild`	`boolean`	—
`children*`	`string`	—

Prop	Type	Default
`children`	`ReactNode`	—
`open`	`boolean`	—
`defaultOpen`	`boolean`	—
`onOpenChange`	`function`	—

Prop	Type	Default

Prop	Type	Default

Prop	Type	Default
`type`	`enum`	—
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—

DropdownMenu

Example

Anatomy

Usage

With Submenus

With Checkbox Items

With Radio Items

With Icons

With Different Colors

DropdownMenu.Root Props

DropdownMenu.CheckboxItem Props

DropdownMenu.Content Props

DropdownMenu.Group Props

DropdownMenu.Item Props

DropdownMenu.Label Props

DropdownMenu.Portal Props

DropdownMenu.RadioGroup Props

DropdownMenu.RadioItem Props

DropdownMenu.Separator Props

DropdownMenu.Shortcut Props

DropdownMenu.Sub Props

DropdownMenu.SubContent Props

DropdownMenu.SubTrigger Props

DropdownMenu.Trigger Props