> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# DropdownMenu

A menu of actions hanging off a trigger — reach for `Select` when the reader is choosing a value for a form, since a menu runs commands rather than holding an answer. Leave the primary action visible as a `Button` and put only the secondary ones in here; past roughly ten items, group them or move them somewhere with room.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/DropdownMenu) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/actions-dropdownmenu--overview)

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem } from '@wallarm-org/design-system/DropdownMenu';
import { Kbd, KbdGroup } from '@wallarm-org/design-system/Kbd';

export const Basic = () => (
  <DropdownMenu data-testid='dropdown-menu'>
    <DropdownMenuTrigger asChild>
      <Button variant='outline' color='neutral'>
        Open
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuGroup>
        <DropdownMenuItem>
          Profile
          <DropdownMenuShortcut>
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>P</Kbd>
            </KbdGroup>
          </DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Billing
          <DropdownMenuShortcut>
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>B</Kbd>
            </KbdGroup>
          </DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Settings
          <DropdownMenuShortcut>
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>S</Kbd>
            </KbdGroup>
          </DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Keyboard shortcuts super
          <DropdownMenuShortcut>
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>K</Kbd>
            </KbdGroup>
          </DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuGroup>

      <DropdownMenuSeparator />

      <DropdownMenuGroup>
        <DropdownMenuItem>Team</DropdownMenuItem>
        <DropdownMenu>
          <DropdownMenuTriggerItem>Invite users</DropdownMenuTriggerItem>
          <DropdownMenuContent>
            <DropdownMenuItem>Email</DropdownMenuItem>
            <DropdownMenuItem>Message</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>More...</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
        <DropdownMenuItem>
          New Team
          <DropdownMenuShortcut>
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>T</Kbd>
            </KbdGroup>
          </DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuGroup>

      <DropdownMenuSeparator />

      <DropdownMenuItem>GitHub</DropdownMenuItem>
      <DropdownMenuItem>Support</DropdownMenuItem>
      <DropdownMenuItem disabled>API</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem variant='destructive'>
        Log out
        <DropdownMenuShortcut>
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>Q</Kbd>
          </KbdGroup>
        </DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
);
```

## Usage

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem } from '@wallarm-org/design-system/DropdownMenu';
import { Kbd, KbdGroup } from '@wallarm-org/design-system/Kbd';
```

## Examples

### Context

`DropdownMenuContextTrigger` opens the same menu on right-click, and
`DropdownMenuTriggerItem` nests a submenu inside it. Always leave a left-click route to the same
actions — a right-click-only affordance is undiscoverable.

```tsx
import { DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTriggerItem } from '@wallarm-org/design-system/DropdownMenu';
import { Kbd, KbdGroup } from '@wallarm-org/design-system/Kbd';

export const Context = () => (
  <DropdownMenu>
    <DropdownMenuContextTrigger asChild>
      <div className='flex items-center justify-center w-300 h-192 border border-border-primary border-dashed rounded-8'>
        Right click here
      </div>
    </DropdownMenuContextTrigger>
    <DropdownMenuContent>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuGroup>
        <DropdownMenuItem>
          Profile
          <DropdownMenuShortcut>
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>P</Kbd>
            </KbdGroup>
          </DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Billing
          <DropdownMenuShortcut>
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>B</Kbd>
            </KbdGroup>
          </DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Settings
          <DropdownMenuShortcut>
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>S</Kbd>
            </KbdGroup>
          </DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Keyboard shortcuts super
          <DropdownMenuShortcut>
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>K</Kbd>
            </KbdGroup>
          </DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuGroup>

      <DropdownMenuSeparator />

      <DropdownMenuGroup>
        <DropdownMenuItem>Team</DropdownMenuItem>
        <DropdownMenu>
          <DropdownMenuTriggerItem>Invite users</DropdownMenuTriggerItem>
          <DropdownMenuContent>
            <DropdownMenuItem>Email</DropdownMenuItem>
            <DropdownMenuItem>Message</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>More...</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
        <DropdownMenuItem>
          New Team
          <DropdownMenuShortcut>
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>T</Kbd>
            </KbdGroup>
          </DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuGroup>

      <DropdownMenuSeparator />

      <DropdownMenuItem>GitHub</DropdownMenuItem>
      <DropdownMenuItem>Support</DropdownMenuItem>
      <DropdownMenuItem disabled>API</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem variant='destructive'>
        Log out
        <DropdownMenuShortcut>
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>Q</Kbd>
          </KbdGroup>
        </DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
);
```

### With descriptions

`DropdownMenuItemContent` pairs `DropdownMenuItemText` with
`DropdownMenuItemDescription` for a second line. Descriptions make a menu tall quickly, which is
when separators start doing real work.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemText, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';
import { CirclePlus, Plus } from '@wallarm-org/design-system/icons';
import { Kbd, KbdGroup } from '@wallarm-org/design-system/Kbd';

export const WithDescriptions = () => (
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button variant='outline' color='neutral'>
        <Plus />
        Add Widget
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>
        <DropdownMenuItemContent>
          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>
          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
        </DropdownMenuItemContent>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <DropdownMenuItemContent>
          <DropdownMenuItemText>Canvas</DropdownMenuItemText>
          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
        </DropdownMenuItemContent>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <DropdownMenuItemContent>
          <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>
          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
        </DropdownMenuItemContent>
        <DropdownMenuShortcut>
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>Q</Kbd>
          </KbdGroup>
        </DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuSeparator />

      <DropdownMenuItem variant='brand'>
        <CirclePlus />
        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
);
```

### With icons

`DropdownMenuItemIcon` sits before the label. Icon every item in a group or none of
them — a half-iconned list reads as though some items are missing theirs.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';
import { CirclePlus, Earth, LayoutTemplate, Maximize, Plus } from '@wallarm-org/design-system/icons';
import { Kbd, KbdGroup } from '@wallarm-org/design-system/Kbd';

export const WithIcons = () => (
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button variant='outline' color='neutral'>
        <Plus />
        Add Widget
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>
        <DropdownMenuItemIcon>
          <LayoutTemplate />
        </DropdownMenuItemIcon>
        <DropdownMenuItemContent>
          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>
        </DropdownMenuItemContent>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <DropdownMenuItemIcon>
          <Maximize />
        </DropdownMenuItemIcon>
        <DropdownMenuItemContent>
          <DropdownMenuItemText>Canvas</DropdownMenuItemText>
        </DropdownMenuItemContent>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <DropdownMenuItemIcon>
          <Earth />
        </DropdownMenuItemIcon>
        <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>
        <DropdownMenuShortcut>
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>Q</Kbd>
          </KbdGroup>
        </DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuSeparator />

      <DropdownMenuItem variant='brand'>
        <CirclePlus />
        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
);
```

### With footer

`DropdownMenuFooter` bleeds to the panel edge under a divider and renders at secondary
emphasis, so it suits a persistent link or count rather than an action competing with the items.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';
import { Kbd, KbdGroup } from '@wallarm-org/design-system/Kbd';

export const WithFooter = () => (
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button variant='outline' color='neutral'>
        Open
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
      <DropdownMenuItem>Settings</DropdownMenuItem>
      <DropdownMenuItem>Notifications</DropdownMenuItem>
      <DropdownMenuItem>Integrations</DropdownMenuItem>
      <DropdownMenuItem>Security</DropdownMenuItem>
      <DropdownMenuItem>API Keys</DropdownMenuItem>
      <DropdownMenuItem>Webhooks</DropdownMenuItem>
      <DropdownMenuItem>Audit Log</DropdownMenuItem>
      <DropdownMenuItem>Team Members</DropdownMenuItem>
      <DropdownMenuItem>Permissions</DropdownMenuItem>
      <DropdownMenuItem>Usage</DropdownMenuItem>
      <DropdownMenuFooter>
        <span className='flex items-center gap-4'>
          <KbdGroup>
            <Kbd>↑</Kbd>
            <Kbd>↓</Kbd>
          </KbdGroup>
          to navigate
        </span>
        <span className='flex items-center gap-4'>
          <KbdGroup>
            <Kbd>↵</Kbd>
          </KbdGroup>
          to select
        </span>
      </DropdownMenuFooter>
    </DropdownMenuContent>
  </DropdownMenu>
);
```

### With description and icons

Icons and descriptions together, which is the widest an item gets. Past this the
menu is doing a panel's job — reach for a `Popover`.

```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';
import { CirclePlus, Earth, LayoutTemplate, Maximize, Plus } from '@wallarm-org/design-system/icons';
import { Kbd, KbdGroup } from '@wallarm-org/design-system/Kbd';

export const WithDescriptionAndIcons = () => (
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button variant='outline' color='neutral'>
        <Plus />
        Add Widget
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>
        <DropdownMenuItemIcon>
          <LayoutTemplate />
        </DropdownMenuItemIcon>
        <DropdownMenuItemContent>
          <DropdownMenuItemText>Bar-volume chart</DropdownMenuItemText>
          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
        </DropdownMenuItemContent>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <DropdownMenuItemIcon>
          <Maximize />
        </DropdownMenuItemIcon>
        <DropdownMenuItemContent>
          <DropdownMenuItemText>Canvas</DropdownMenuItemText>
          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
        </DropdownMenuItemContent>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <DropdownMenuItemIcon>
          <Earth />
        </DropdownMenuItemIcon>
        <DropdownMenuItemContent>
          <DropdownMenuItemText>Attacks heat-map</DropdownMenuItemText>
          <DropdownMenuItemDescription>Description</DropdownMenuItemDescription>
        </DropdownMenuItemContent>
        <DropdownMenuShortcut>
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>Q</Kbd>
          </KbdGroup>
        </DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuSeparator />

      <DropdownMenuItem variant='brand'>
        <CirclePlus />
        <DropdownMenuItemText>Request custom widget</DropdownMenuItemText>
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
);
```

### With checkbox items

`DropdownMenuCheckboxItem` for options that aren't mutually exclusive. Selecting one
leaves the menu open, so several can be toggled in a single visit.

```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';

export const WithCheckboxItems = () => {
  const [bold, setBold] = useState(true);
  const [italic, setItalic] = useState(false);
  const [underline, setUnderline] = useState(true);

  return (
    <DropdownMenu data-testid='dropdown-menu'>
      <DropdownMenuTrigger asChild>
        <Button variant='outline' color='neutral'>
          Text style
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>Text style</DropdownMenuLabel>
        <DropdownMenuCheckboxItem checked={bold} onCheckedChange={setBold}>
          Bold
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={italic} onCheckedChange={setItalic}>
          Italic
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={underline} onCheckedChange={setUnderline}>
          Underline
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={false} disabled>
          Strikethrough
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};
```

### With radio group

`DropdownMenuRadioGroup` for one-of-many. It also stays open on select, so the reader
sees the indicator move before dismissing it themselves.

```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';

export const WithRadioGroup = () => {
  const [view, setView] = useState('list');

  const handleViewChange = (details: { value: string }) => {
    setView(details.value);
  };

  return (
    <DropdownMenu data-testid='dropdown-menu'>
      <DropdownMenuTrigger asChild>
        <Button variant='outline' color='neutral'>
          View mode
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>View mode</DropdownMenuLabel>
        <DropdownMenuRadioGroup value={view} onValueChange={handleViewChange}>
          <DropdownMenuRadioItem value='list'>List</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value='grid'>Grid</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value='compact' disabled>
            Compact
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};
```

### With mixed selection items

Commands, checkboxes and a radio group in one menu. `DropdownMenuLabel` and
`DropdownMenuSeparator` are what keep the three kinds from reading as one flat list.

```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';

export const WithMixedSelectionItems = () => {
  const [bold, setBold] = useState(true);
  const [italic, setItalic] = useState(false);
  const [view, setView] = useState('list');

  const handleViewChange = (details: { value: string }) => {
    setView(details.value);
  };

  return (
    <DropdownMenu data-testid='dropdown-menu'>
      <DropdownMenuTrigger asChild>
        <Button variant='outline' color='neutral'>
          Editor settings
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>Text style</DropdownMenuLabel>
        <DropdownMenuCheckboxItem checked={bold} onCheckedChange={setBold}>
          Bold
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={italic} onCheckedChange={setItalic}>
          Italic
        </DropdownMenuCheckboxItem>

        <DropdownMenuSeparator />

        <DropdownMenuLabel>View mode</DropdownMenuLabel>
        <DropdownMenuRadioGroup value={view} onValueChange={handleViewChange}>
          <DropdownMenuRadioItem value='list'>List</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value='grid'>Grid</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>

        <DropdownMenuSeparator />

        <DropdownMenuItem variant='destructive'>Reset to defaults</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};
```

## Props

| Prop              | Type                                                       | Default | Description                                                                                                                                                                                                                                                                                                          |
| ----------------- | ---------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| open              | `boolean \| undefined`                                     |         |                                                                                                                                                                                                                                                                                                                      |
| defaultOpen       | `boolean \| undefined`                                     |         |                                                                                                                                                                                                                                                                                                                      |
| onOpenChange      | `((open: boolean) => void) \| undefined`                   |         |                                                                                                                                                                                                                                                                                                                      |
| modal             | `boolean \| undefined`                                     |         |                                                                                                                                                                                                                                                                                                                      |
| anchorPoint       | `{ x: number; y: number; } \| undefined`                   |         | Virtual anchor point for positioning without a trigger element                                                                                                                                                                                                                                                       |
| positioning       | `PositioningOptions \| undefined`                          |         | Override default positioning config                                                                                                                                                                                                                                                                                  |
| highlightedValue  | `string \| null \| undefined`                              |         | Programmatically control which item is highlighted                                                                                                                                                                                                                                                                   |
| onHighlightChange | `((details: HighlightChangeDetails) => void) \| undefined` |         | Callback when the highlighted item changes (e.g. on mouse hover)                                                                                                                                                                                                                                                     |
| closeOnSelect     | `boolean \| undefined`                                     |         | Whether selecting an item closes the menu (default true)                                                                                                                                                                                                                                                             |
| onRequestDismiss  | `((event: LayerDismissEvent) => void) \| undefined`        |         | Called when another layer asks this menu to dismiss — e.g. a layer below it in the stack is removed. Call `event.preventDefault()` to keep the menu open.                                                                                                                                                            |
| ids               | `ElementIds \| undefined`                                  |         | Override the trigger element's id. Pass the same id to another compound component's `ids.trigger` (e.g. `Tooltip`, `Popover`) to compose their triggers on one element via nested `asChild` without an extra wrapper node — otherwise the outer trigger's id wins and the other component can't find its own anchor. |
| data-testid       | `string \| undefined`                                      |         |                                                                                                                                                                                                                                                                                                                      |

### DropdownMenuCheckboxItem

| Prop            | Type                                                       | Default   | Description                                      |
| --------------- | ---------------------------------------------------------- | --------- | ------------------------------------------------ |
| checked \*      | `boolean`                                                  |           |                                                  |
| onCheckedChange | `((checked: boolean) => void) \| undefined`                |           |                                                  |
| value           | `string \| undefined`                                      |           | Optional — auto-generated via useId() if omitted |
| disabled        | `boolean \| undefined`                                     |           |                                                  |
| closeOnSelect   | `boolean \| undefined`                                     |           |                                                  |
| title           | `string \| undefined`                                      |           |                                                  |
| defaultChecked  | `boolean \| undefined`                                     |           |                                                  |
| defaultValue    | `string \| number \| readonly string[] \| undefined`       |           |                                                  |
| autoFocus       | `boolean \| undefined`                                     |           |                                                  |
| tabIndex        | `number \| undefined`                                      |           |                                                  |
| rel             | `string \| undefined`                                      |           |                                                  |
| onChange        | `ChangeEventHandler<T, Element> \| undefined`              |           |                                                  |
| variant         | `{ default: string; brand: string; destructive: string; }` | `default` |                                                  |
| inset           | `{ true: string; }`                                        |           |                                                  |
| data-testid     | `string \| undefined`                                      |           |                                                  |

### DropdownMenuContextTrigger

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| asChild        | `boolean \| undefined`                               |         |             |
| title          | `string \| undefined`                                |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| type           | `"button" \| "submit" \| "reset" \| undefined`       |         |             |
| disabled       | `boolean \| undefined`                               |         |             |
| name           | `string \| undefined`                                |         |             |
| value          | `string \| number \| readonly string[] \| undefined` |         |             |
| data-testid    | `string \| undefined`                                |         |             |

### DropdownMenuItem

| Prop           | Type                                                       | Default   | Description                                                       |
| -------------- | ---------------------------------------------------------- | --------- | ----------------------------------------------------------------- |
| inset          | `boolean \| undefined`                                     | `false`   |                                                                   |
| disabled       | `boolean \| undefined`                                     |           |                                                                   |
| onSelect       | `(() => void) \| undefined`                                |           |                                                                   |
| value          | `string \| undefined`                                      |           | Explicit value for programmatic highlighting via highlightedValue |
| title          | `string \| undefined`                                      |           |                                                                   |
| defaultChecked | `boolean \| undefined`                                     |           |                                                                   |
| defaultValue   | `string \| number \| readonly string[] \| undefined`       |           |                                                                   |
| autoFocus      | `boolean \| undefined`                                     |           |                                                                   |
| tabIndex       | `number \| undefined`                                      |           |                                                                   |
| rel            | `string \| undefined`                                      |           |                                                                   |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`              |           |                                                                   |
| variant        | `{ default: string; brand: string; destructive: string; }` | `default` |                                                                   |
| data-testid    | `string \| undefined`                                      |           |                                                                   |

### DropdownMenuRadioGroup

| Prop           | Type                                                   | Default | Description |
| -------------- | ------------------------------------------------------ | ------- | ----------- |
| value          | `string \| undefined`                                  |         |             |
| onValueChange  | `((details: { value: string; }) => void) \| undefined` |         |             |
| title          | `string \| undefined`                                  |         |             |
| defaultChecked | `boolean \| undefined`                                 |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined`   |         |             |
| autoFocus      | `boolean \| undefined`                                 |         |             |
| id             | `string \| undefined`                                  |         |             |
| tabIndex       | `number \| undefined`                                  |         |             |
| rel            | `string \| undefined`                                  |         |             |
| data-testid    | `string \| undefined`                                  |         |             |

### DropdownMenuRadioItem

| Prop           | Type                                                       | Default   | Description                                       |
| -------------- | ---------------------------------------------------------- | --------- | ------------------------------------------------- |
| value \*       | `string`                                                   |           | Required — identifies this radio within the group |
| disabled       | `boolean \| undefined`                                     |           |                                                   |
| closeOnSelect  | `boolean \| undefined`                                     |           |                                                   |
| title          | `string \| undefined`                                      |           |                                                   |
| defaultChecked | `boolean \| undefined`                                     |           |                                                   |
| defaultValue   | `string \| number \| readonly string[] \| undefined`       |           |                                                   |
| autoFocus      | `boolean \| undefined`                                     |           |                                                   |
| tabIndex       | `number \| undefined`                                      |           |                                                   |
| rel            | `string \| undefined`                                      |           |                                                   |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`              |           |                                                   |
| variant        | `{ default: string; brand: string; destructive: string; }` | `default` |                                                   |
| inset          | `{ true: string; }`                                        |           |                                                   |
| data-testid    | `string \| undefined`                                      |           |                                                   |

### DropdownMenuTrigger

| Prop           | Type                                                 | Default | Description                                                                                                                                                                                                                                                                                                                                            |
| -------------- | ---------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| asChild        | `boolean \| undefined`                               |         |                                                                                                                                                                                                                                                                                                                                                        |
| value          | `string \| undefined`                                |         | A real `<button>`'s `value` DOM property is always a string at runtime. Narrowed from the native `ButtonHTMLAttributes['value']` (`string \| number \| readonly string[] \| undefined`) to match Ark UI's `Menu.Trigger`, which also uses `value` to identify this trigger (see `onTriggerValueChange`). The prop still forwards to the real DOM node. |
| title          | `string \| undefined`                                |         |                                                                                                                                                                                                                                                                                                                                                        |
| defaultChecked | `boolean \| undefined`                               |         |                                                                                                                                                                                                                                                                                                                                                        |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                                                                                                                                                                                                                                                                                                                                        |
| autoFocus      | `boolean \| undefined`                               |         |                                                                                                                                                                                                                                                                                                                                                        |
| id             | `string \| undefined`                                |         |                                                                                                                                                                                                                                                                                                                                                        |
| tabIndex       | `number \| undefined`                                |         |                                                                                                                                                                                                                                                                                                                                                        |
| rel            | `string \| undefined`                                |         |                                                                                                                                                                                                                                                                                                                                                        |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                                                                                                                                                                                                                                                                                        |
| type           | `"button" \| "submit" \| "reset" \| undefined`       |         |                                                                                                                                                                                                                                                                                                                                                        |
| disabled       | `boolean \| undefined`                               |         |                                                                                                                                                                                                                                                                                                                                                        |
| name           | `string \| undefined`                                |         |                                                                                                                                                                                                                                                                                                                                                        |
| data-testid    | `string \| undefined`                                |         |                                                                                                                                                                                                                                                                                                                                                        |

### DropdownMenuTriggerItem

| Prop           | Type                                                       | Default   | Description |
| -------------- | ---------------------------------------------------------- | --------- | ----------- |
| asChild        | `boolean \| undefined`                                     |           |             |
| inset          | `boolean \| undefined`                                     | `false`   |             |
| title          | `string \| undefined`                                      |           |             |
| defaultChecked | `boolean \| undefined`                                     |           |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined`       |           |             |
| autoFocus      | `boolean \| undefined`                                     |           |             |
| id             | `string \| undefined`                                      |           |             |
| tabIndex       | `number \| undefined`                                      |           |             |
| rel            | `string \| undefined`                                      |           |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`              |           |             |
| variant        | `{ default: string; brand: string; destructive: string; }` | `default` |             |
| data-testid    | `string \| undefined`                                      |           |             |

## Explorer