DropdownMenu

A versatile dropdown menu component with multiple interactive elements.

Report Issue Github

Usage

The DropdownMenu component is designed for flexibility and can be used in various contexts where a dropdown interaction is needed.

Basic Usage

A simple dropdown menu with an embedded item.


<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button variant="ghost">Open Menu</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content
    items={[
      { label: 'Item 1', onClick: () => console.log('Item 1') },
      { label: 'Item 2', onClick: () => console.log('Item 2') },
    ]}
  />
</DropdownMenu.Root>

With Submenu

Dropdown menu containing a nested submenu.


<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button variant="ghost">Open Menu</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content
    items={[
      { label: 'Item 1', onClick: () => console.log('Item 1') },
      {
        label: 'Submenu',
        children: [
          { label: 'Sub Item 1', onClick: () => console.log('Sub Item 1') },
          { label: 'Sub Item 2', onClick: () => console.log('Sub Item 2') },
        ],
      },
      { label: 'Item 3', onClick: () => console.log('Item 3') },
    ]}
  />
</DropdownMenu.Root>

With Keyboard Shortcuts

Dropdown items with assigned keyboard shortcuts.


<DropdownMenu.Root>
  <DropdownMenu.Trigger shortcut={['Ctrl', 'O']}>
    <Button variant="ghost">Open Menu</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content
    items={[
      { label: 'Save', shortcut: ['Ctrl', 'S'], onClick: () => console.log('Save') },
      { label: 'Open', shortcut: ['Ctrl', 'O'], onClick: () => console.log('Open') },
    ]}
  />
</DropdownMenu.Root>

Placement

Using the placement prop we can adjust placement of the component.


<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button variant="ghost">Open Menu</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content
    placement="right"
    items={[
      { label: 'Item 1', onClick: () => console.log('Item 1') },
      {
        label: 'Submenu',
        children: [
          { label: 'Sub Item 1', onClick: () => console.log('Sub Item 1') },
          { label: 'Sub Item 2', onClick: () => console.log('Sub Item 2') },
        ],
      },
      { variant: 'separator' },
      { label: 'Item 3', onClick: () => console.log('Item 3') },
    ]}
  />
</DropdownMenu.Root>

Shadow

Using the shadow prop we can adjust shadow values for the component.


<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button variant="ghost">Open Menu</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content
    shadow="6"
    items={[
      { label: 'Item 1', onClick: () => console.log('Item 1') },
      { variant: 'separator' },
      {
        label: 'Submenu',
        children: [
          { label: 'Sub Item 1', onClick: () => console.log('Sub Item 1') },
          { label: 'Sub Item 2', onClick: () => console.log('Sub Item 2') },
        ],
      },
      { label: 'Item 3', onClick: () => console.log('Item 3') },
    ]}
  />
</DropdownMenu.Root>

Examples

A simple dropdown menu with an embedded item.


<DropdownMenu.Root>
  <DropdownMenu.Trigger shortcut={['Ctrl', 'O']}>
    <Button variant="ghost">Trigger</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content
    items={[
      {
        label: 'Trigger',
        children: [
          {
            label: 'Item with Shortcut',
            shortcut: ['Ctrl', 'Shift', 'A'],
            onClick: () => {
              console.log('Item with Shortcu');
            },
          },
          {
            label: 'Move to folder…',
          },
          {
            label: 'Advanced options…',
          },
        ],
      },
      { variant: 'separator' },
      {
        label: 'Edit',
        shortcut: ['Ctrl', 'E'],
        onClick: () => {
          console.log('Edit');
        },
      },
      {
        label: 'Duplicate',
        shortcut: ['Ctrl', 'D'],
        onClick: () => {
          console.log('Duplicate');
        },
      },
      {
        label: 'More',
        shortcut: ['Ctrl', 'M'],
        children: [
          {
            label: 'Move to project…',
            shortcut: ['Ctrl', 'M'],
            onClick: () => {
              console.log('Move to project…');
            },
          },
          {
            label: 'Archive',
            shortcut: ['Ctrl', 'E'],
            onClick: () => {
              console.log('Archive');
            },
          },
          // ... Other sub-items
        ],
      },
      { variant: 'separator' },
      {
        label: 'Delete',
        shortcut: ['Ctrl', 'X'],
        onClick: () => {
          console.log('Delete');
        },
        color: 'red',
      },
    ]}
  ></DropdownMenu.Content>
</DropdownMenu.Root>

API

Props

Content

Prop	Type	Default	Required
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`-`	-
`items`	`Item[]`	`-`	Yes
`shadow`	`ThemeShadow`	-	-

Trigger

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`shortcut`	`WoozCommandCode[]`	-	-

Item

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`variant`	`'item' \| 'separator'`	-	-
`shortcut`	`WoozCommandCode[]`	-	-
`color`	`ThemeAccentColor`	-	-
`onClick`	`Function`	-	-
`disabled`	`boolean`	-	-
`label`	`string`	-	Yes

Breadcrumb

Icon Menu