Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# DropdownMenu

Menu that displays when triggered by a button or element

## Example​

    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​

Menu that displays when triggered by a button or element

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

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

### Usage​

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

    <DropdownMenu /* props */ />

## DropdownMenuCheckboxItem​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

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

### Usage​

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

    <DropdownMenuCheckboxItem /* props */ />

## DropdownMenuContent​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### 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​

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

    <DropdownMenuContent /* props */ />

## DropdownMenuGroup​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

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

### Usage​

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

    <DropdownMenuGroup /* props */ />

## DropdownMenuItem​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

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

### Usage​

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

    <DropdownMenuItem /* props */ />

## DropdownMenuLabel​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

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

### Usage​

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

    <DropdownMenuLabel /* props */ />

## DropdownMenuPortal​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### 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​

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

    <DropdownMenuPortal /* props */ />

## DropdownMenuRadioGroup​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

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

### Usage​

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

    <DropdownMenuRadioGroup /* props */ />

## DropdownMenuRadioItem​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

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

### Usage​

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

    <DropdownMenuRadioItem /* props */ />

## DropdownMenuSeparator​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

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

### Usage​

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

    <DropdownMenuSeparator /* props */ />

## DropdownMenuShortcut​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <DropdownMenuShortcut /* props */ />

## DropdownMenuSub​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

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

### Usage​

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

    <DropdownMenuSub /* props */ />

## DropdownMenuSubContent​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### 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​

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

    <DropdownMenuSubContent /* props */ />

## DropdownMenuSubTrigger​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

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

### Usage​

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

    <DropdownMenuSubTrigger /* props */ />

## DropdownMenuTrigger​

Source: `packages/appkit-ui/src/react/ui/dropdown-menu.tsx`

### Props​

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

### Usage​

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

    <DropdownMenuTrigger /* props */ />