# DropdownMenu

Menu that displays when triggered by a button or element

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import {
  Cloud,
  CreditCard,
  Github,
  Keyboard,
  LifeBuoy,
  LogOut,
  Mail,
  MessageSquare,
  Plus,
  PlusCircle,
  Settings,
  User,
  UserPlus,
  Users,
} from "lucide-react"

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@databricks/appkit-ui/react"

export default function DropdownMenuExample() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <User />
            <span>Profile</span>
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <CreditCard />
            <span>Billing</span>
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Settings />
            <span>Settings</span>
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Keyboard />
            <span>Keyboard shortcuts</span>
            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <Users />
            <span>Team</span>
          </DropdownMenuItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <UserPlus />
              <span>Invite users</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuPortal>
              <DropdownMenuSubContent>
                <DropdownMenuItem>
                  <Mail />
                  <span>Email</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <MessageSquare />
                  <span>Message</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <PlusCircle />
                  <span>More...</span>
                </DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuPortal>
          </DropdownMenuSub>
          <DropdownMenuItem>
            <Plus />
            <span>New Team</span>
            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <Github />
          <span>GitHub</span>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <LifeBuoy />
          <span>Support</span>
        </DropdownMenuItem>
        <DropdownMenuItem disabled>
          <Cloud />
          <span>API</span>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <LogOut />
          <span>Log out</span>
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

```

## DropdownMenu[​](#dropdownmenu-1 "Direct link to DropdownMenu")

Menu that displays when triggered by a button or element

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props "Direct link to Props")

| Prop           | Type                        | Required | Default | Description |
| -------------- | --------------------------- | -------- | ------- | ----------- |
| `dir`          | `enum`                      |          | -       | -           |
| `open`         | `boolean`                   |          | -       | -           |
| `defaultOpen`  | `boolean`                   |          | -       | -           |
| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |
| `modal`        | `boolean`                   |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { DropdownMenu } from '@databricks/appkit-ui';

<DropdownMenu /* props */ />

```

## DropdownMenuCheckboxItem[​](#dropdownmenucheckboxitem "Direct link to DropdownMenuCheckboxItem")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-1 "Direct link to Props")

| Prop              | Type                           | Required | Default | Description |
| ----------------- | ------------------------------ | -------- | ------- | ----------- |
| `onSelect`        | `((event: Event) => void)`     |          | -       | -           |
| `asChild`         | `boolean`                      |          | -       | -           |
| `disabled`        | `boolean`                      |          | -       | -           |
| `checked`         | `CheckedState`                 |          | -       | -           |
| `onCheckedChange` | `((checked: boolean) => void)` |          | -       | -           |
| `textValue`       | `string`                       |          | -       | -           |

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { DropdownMenuCheckboxItem } from '@databricks/appkit-ui';

<DropdownMenuCheckboxItem /* props */ />

```

## DropdownMenuContent[​](#dropdownmenucontent "Direct link to DropdownMenuContent")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-2 "Direct link to Props")

| Prop                     | Type                                                                        | Required | Default | Description                                                                                                           |
| ------------------------ | --------------------------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| `asChild`                | `boolean`                                                                   |          | -       | -                                                                                                                     |
| `forceMount`             | `true`                                                                      |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| `onEscapeKeyDown`        | `((event: KeyboardEvent) => void)`                                          |          | -       | -                                                                                                                     |
| `onPointerDownOutside`   | `((event: PointerDownOutsideEvent) => void)`                                |          | -       | -                                                                                                                     |
| `onFocusOutside`         | `((event: FocusOutsideEvent) => void)`                                      |          | -       | -                                                                                                                     |
| `onInteractOutside`      | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)`           |          | -       | -                                                                                                                     |
| `onCloseAutoFocus`       | `((event: Event) => void)`                                                  |          | -       | Event handler called when auto-focusing on close. Can be prevented.                                                   |
| `loop`                   | `boolean`                                                                   |          | -       | Whether keyboard navigation should loop around @defaultValue false                                                    |
| `align`                  | `enum`                                                                      |          | -       | -                                                                                                                     |
| `side`                   | `enum`                                                                      |          | -       | -                                                                                                                     |
| `sideOffset`             | `number`                                                                    |          | -       | -                                                                                                                     |
| `alignOffset`            | `number`                                                                    |          | -       | -                                                                                                                     |
| `arrowPadding`           | `number`                                                                    |          | -       | -                                                                                                                     |
| `avoidCollisions`        | `boolean`                                                                   |          | -       | -                                                                                                                     |
| `collisionBoundary`      | `Boundary \| Boundary[]`                                                    |          | -       | -                                                                                                                     |
| `collisionPadding`       | `number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>>` |          | -       | -                                                                                                                     |
| `sticky`                 | `enum`                                                                      |          | -       | -                                                                                                                     |
| `hideWhenDetached`       | `boolean`                                                                   |          | -       | -                                                                                                                     |
| `updatePositionStrategy` | `enum`                                                                      |          | -       | -                                                                                                                     |

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { DropdownMenuContent } from '@databricks/appkit-ui';

<DropdownMenuContent /* props */ />

```

## DropdownMenuGroup[​](#dropdownmenugroup "Direct link to DropdownMenuGroup")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-3 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-3 "Direct link to Usage")

```tsx
import { DropdownMenuGroup } from '@databricks/appkit-ui';

<DropdownMenuGroup /* props */ />

```

## DropdownMenuItem[​](#dropdownmenuitem "Direct link to DropdownMenuItem")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-4 "Direct link to Props")

| Prop        | Type                       | Required | Default   | Description |
| ----------- | -------------------------- | -------- | --------- | ----------- |
| `onSelect`  | `((event: Event) => void)` |          | -         | -           |
| `asChild`   | `boolean`                  |          | -         | -           |
| `disabled`  | `boolean`                  |          | -         | -           |
| `textValue` | `string`                   |          | -         | -           |
| `inset`     | `boolean`                  |          | -         | -           |
| `variant`   | `enum`                     |          | `default` | -           |

### Usage[​](#usage-4 "Direct link to Usage")

```tsx
import { DropdownMenuItem } from '@databricks/appkit-ui';

<DropdownMenuItem /* props */ />

```

## DropdownMenuLabel[​](#dropdownmenulabel "Direct link to DropdownMenuLabel")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-5 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |
| `inset`   | `boolean` |          | -       | -           |

### Usage[​](#usage-5 "Direct link to Usage")

```tsx
import { DropdownMenuLabel } from '@databricks/appkit-ui';

<DropdownMenuLabel /* props */ />

```

## DropdownMenuPortal[​](#dropdownmenuportal "Direct link to DropdownMenuPortal")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-6 "Direct link to Props")

| Prop         | Type                                  | Required | Default | Description                                                                                                           |
| ------------ | ------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| `container`  | `Element \| DocumentFragment \| null` |          | -       | Specify a container element to portal the content into.                                                               |
| `forceMount` | `true`                                |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |

### Usage[​](#usage-6 "Direct link to Usage")

```tsx
import { DropdownMenuPortal } from '@databricks/appkit-ui';

<DropdownMenuPortal /* props */ />

```

## DropdownMenuRadioGroup[​](#dropdownmenuradiogroup "Direct link to DropdownMenuRadioGroup")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-7 "Direct link to Props")

| Prop            | Type                        | Required | Default | Description |
| --------------- | --------------------------- | -------- | ------- | ----------- |
| `asChild`       | `boolean`                   |          | -       | -           |
| `value`         | `string`                    | ✓        | -       | -           |
| `onValueChange` | `((value: string) => void)` |          | -       | -           |

### Usage[​](#usage-7 "Direct link to Usage")

```tsx
import { DropdownMenuRadioGroup } from '@databricks/appkit-ui';

<DropdownMenuRadioGroup /* props */ />

```

## DropdownMenuRadioItem[​](#dropdownmenuradioitem "Direct link to DropdownMenuRadioItem")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-8 "Direct link to Props")

| Prop        | Type                       | Required | Default | Description |
| ----------- | -------------------------- | -------- | ------- | ----------- |
| `onSelect`  | `((event: Event) => void)` |          | -       | -           |
| `asChild`   | `boolean`                  |          | -       | -           |
| `disabled`  | `boolean`                  |          | -       | -           |
| `value`     | `string`                   | ✓        | -       | -           |
| `textValue` | `string`                   |          | -       | -           |

### Usage[​](#usage-8 "Direct link to Usage")

```tsx
import { DropdownMenuRadioItem } from '@databricks/appkit-ui';

<DropdownMenuRadioItem /* props */ />

```

## DropdownMenuSeparator[​](#dropdownmenuseparator "Direct link to DropdownMenuSeparator")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-9 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-9 "Direct link to Usage")

```tsx
import { DropdownMenuSeparator } from '@databricks/appkit-ui';

<DropdownMenuSeparator /* props */ />

```

## DropdownMenuShortcut[​](#dropdownmenushortcut "Direct link to DropdownMenuShortcut")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-10 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-10 "Direct link to Usage")

```tsx
import { DropdownMenuShortcut } from '@databricks/appkit-ui';

<DropdownMenuShortcut /* props */ />

```

## DropdownMenuSub[​](#dropdownmenusub "Direct link to DropdownMenuSub")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-11 "Direct link to Props")

| Prop           | Type                        | Required | Default | Description |
| -------------- | --------------------------- | -------- | ------- | ----------- |
| `open`         | `boolean`                   |          | -       | -           |
| `defaultOpen`  | `boolean`                   |          | -       | -           |
| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |

### Usage[​](#usage-11 "Direct link to Usage")

```tsx
import { DropdownMenuSub } from '@databricks/appkit-ui';

<DropdownMenuSub /* props */ />

```

## DropdownMenuSubContent[​](#dropdownmenusubcontent "Direct link to DropdownMenuSubContent")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-12 "Direct link to Props")

| Prop                     | Type                                                                        | Required | Default | Description                                                                                                           |
| ------------------------ | --------------------------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| `asChild`                | `boolean`                                                                   |          | -       | -                                                                                                                     |
| `forceMount`             | `true`                                                                      |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| `onEscapeKeyDown`        | `((event: KeyboardEvent) => void)`                                          |          | -       | -                                                                                                                     |
| `onPointerDownOutside`   | `((event: PointerDownOutsideEvent) => void)`                                |          | -       | -                                                                                                                     |
| `onFocusOutside`         | `((event: FocusOutsideEvent) => void)`                                      |          | -       | -                                                                                                                     |
| `onInteractOutside`      | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)`           |          | -       | -                                                                                                                     |
| `loop`                   | `boolean`                                                                   |          | -       | Whether keyboard navigation should loop around @defaultValue false                                                    |
| `sideOffset`             | `number`                                                                    |          | -       | -                                                                                                                     |
| `alignOffset`            | `number`                                                                    |          | -       | -                                                                                                                     |
| `arrowPadding`           | `number`                                                                    |          | -       | -                                                                                                                     |
| `avoidCollisions`        | `boolean`                                                                   |          | -       | -                                                                                                                     |
| `collisionBoundary`      | `Boundary \| Boundary[]`                                                    |          | -       | -                                                                                                                     |
| `collisionPadding`       | `number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>>` |          | -       | -                                                                                                                     |
| `sticky`                 | `enum`                                                                      |          | -       | -                                                                                                                     |
| `hideWhenDetached`       | `boolean`                                                                   |          | -       | -                                                                                                                     |
| `updatePositionStrategy` | `enum`                                                                      |          | -       | -                                                                                                                     |

### Usage[​](#usage-12 "Direct link to Usage")

```tsx
import { DropdownMenuSubContent } from '@databricks/appkit-ui';

<DropdownMenuSubContent /* props */ />

```

## DropdownMenuSubTrigger[​](#dropdownmenusubtrigger "Direct link to DropdownMenuSubTrigger")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-13 "Direct link to Props")

| Prop        | Type      | Required | Default | Description |
| ----------- | --------- | -------- | ------- | ----------- |
| `asChild`   | `boolean` |          | -       | -           |
| `disabled`  | `boolean` |          | -       | -           |
| `textValue` | `string`  |          | -       | -           |
| `inset`     | `boolean` |          | -       | -           |

### Usage[​](#usage-13 "Direct link to Usage")

```tsx
import { DropdownMenuSubTrigger } from '@databricks/appkit-ui';

<DropdownMenuSubTrigger /* props */ />

```

## DropdownMenuTrigger[​](#dropdownmenutrigger "Direct link to DropdownMenuTrigger")

**Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx)

### Props[​](#props-14 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-14 "Direct link to Usage")

```tsx
import { DropdownMenuTrigger } from '@databricks/appkit-ui';

<DropdownMenuTrigger /* props */ />

```