DropdownMenu

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

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 */ />