Skip to content
Falcon

DropdownMenu

Displays a menu to the user - such as a set of actions or functions - triggered by a button.

Code
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@falcon/ui-kit";


export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent className="tw:w-40" align="start">
        <DropdownMenuGroup>
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuItem>
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>Team</DropdownMenuItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem>Email</DropdownMenuItem>
              <DropdownMenuItem>Message</DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>More...</DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuItem>
            New Team
            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>Help Center</DropdownMenuItem>
          <DropdownMenuItem>Support</DropdownMenuItem>
          <DropdownMenuItem disabled>API</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            Log out
            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Composition

Section titled “Composition”

Use the following composition to build a DropdownMenu:

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuCheckboxItem
    │   └── DropdownMenuCheckboxItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   └── DropdownMenuRadioGroup
    │       ├── DropdownMenuRadioItem
    │       └── DropdownMenuRadioItem
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent
            └── DropdownMenuGroup
                ├── DropdownMenuLabel
                ├── DropdownMenuItem
                └── DropdownMenuItem

Basic

Section titled “Basic”

A basic dropdown menu with labels and separators.

Code
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@falcon/ui-kit";


export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuItem>Profile</DropdownMenuItem>
          <DropdownMenuItem>Billing</DropdownMenuItem>
          <DropdownMenuItem>Settings</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Help Center</DropdownMenuItem>
        <DropdownMenuItem>Support</DropdownMenuItem>
        <DropdownMenuItem disabled>API</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
Section titled “Submenu”

Use DropdownMenuSub to nest secondary actions.

Code
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@falcon/ui-kit";


export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuItem>Team</DropdownMenuItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem>Email</DropdownMenuItem>
              <DropdownMenuItem>Message</DropdownMenuItem>
              <DropdownMenuSub>
                <DropdownMenuSubTrigger>More options</DropdownMenuSubTrigger>
                <DropdownMenuSubContent>
                  <DropdownMenuItem>Invite link</DropdownMenuItem>
                  <DropdownMenuItem>CSV import</DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>Webhook</DropdownMenuItem>
                </DropdownMenuSubContent>
              </DropdownMenuSub>
              <DropdownMenuSeparator />
              <DropdownMenuItem>Advanced...</DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuItem>
            New Team
            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Shortcuts

Section titled “Shortcuts”

Add DropdownMenuShortcut to show keyboard hints.

Code
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@falcon/ui-kit";


export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuItem>
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          Log out
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Icons

Section titled “Icons”

Combine icons with labels for quick scanning.

Code
import {
  Button,
  CreditCardIcon,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  LogOutIcon,
  SettingsIcon,
  UserIcon,
} from "@falcon/ui-kit";


export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>
          <UserIcon />
          Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
          <CreditCardIcon />
          Billing
        </DropdownMenuItem>
        <DropdownMenuItem>
          <SettingsIcon />
          Settings
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <LogOutIcon />
          Log out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Checkboxes

Section titled “Checkboxes”

Use DropdownMenuCheckboxItem for toggles.

Code
import {
  Button,
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@falcon/ui-kit";
import { useState } from "react";


export function Example() {
  const [showStatusBar, setShowStatusBar] = useState(true);
  const [showToolbar, setShowToolbar] = useState(false);
  const [showPanel, setShowPanel] = useState(false);


  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent className="tw:w-40">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
          <DropdownMenuCheckboxItem
            checked={showStatusBar ?? false}
            onCheckedChange={setShowStatusBar}
          >
            Status Bar
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={showToolbar}
            onCheckedChange={setShowToolbar}
            disabled
          >
            Toolbar
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={showPanel}
            onCheckedChange={setShowPanel}
          >
            Panel
          </DropdownMenuCheckboxItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Checkboxes Icons

Section titled “Checkboxes Icons”

Add icons to checkbox items.

Code
import {
  BellIcon,
  Button,
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuTrigger,
  MailIcon,
  MessageSquareIcon,
} from "@falcon/ui-kit";
import { useState } from "react";


export function Example() {
  const [notifications, setNotifications] = useState({
    email: true,
    sms: false,
    push: true,
  });


  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Notifications
      </DropdownMenuTrigger>
      <DropdownMenuContent className="tw:w-48">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>
          <DropdownMenuCheckboxItem
            checked={notifications.email}
            onCheckedChange={(checked) =>
              setNotifications({ ...notifications, email: checked === true })
            }
          >
            <MailIcon />
            Email notifications
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={notifications.sms}
            onCheckedChange={(checked) =>
              setNotifications({ ...notifications, sms: checked === true })
            }
          >
            <MessageSquareIcon />
            SMS notifications
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={notifications.push}
            onCheckedChange={(checked) =>
              setNotifications({ ...notifications, push: checked === true })
            }
          >
            <BellIcon />
            Push notifications
          </DropdownMenuCheckboxItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Radio Group

Section titled “Radio Group”

Use DropdownMenuRadioGroup for exclusive choices.

Code
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@falcon/ui-kit";
import { useState } from "react";


export function Example() {
  const [position, setPosition] = useState("bottom");


  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent className="tw:w-32">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
          <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Radio Icons

Section titled “Radio Icons”

Show radio options with icons.

Code
import {
  Building2Icon,
  Button,
  CreditCardIcon,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
  WalletIcon,
} from "@falcon/ui-kit";
import { useState } from "react";


export function Example() {
  const [paymentMethod, setPaymentMethod] = useState("card");


  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Payment Method
      </DropdownMenuTrigger>
      <DropdownMenuContent className="tw:min-w-56">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>
          <DropdownMenuRadioGroup
            value={paymentMethod}
            onValueChange={setPaymentMethod}
          >
            <DropdownMenuRadioItem value="card">
              <CreditCardIcon />
              Credit Card
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="account">
              <WalletIcon />
              On Account
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="bank">
              <Building2Icon />
              Bank Transfer
            </DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Destructive

Section titled “Destructive”

Use variant="destructive" for irreversible actions.

Code
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  PencilIcon,
  ShareIcon,
  TrashIcon,
} from "@falcon/ui-kit";


export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Actions
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <PencilIcon />
            Edit
          </DropdownMenuItem>
          <DropdownMenuItem>
            <ShareIcon />
            Share
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem variant="destructive">
            <TrashIcon />
            Delete
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Complex

Section titled “Complex”

A richer example combining groups, icons, and submenus.

Code
import {
  BellIcon,
  Button,
  CreditCardIcon,
  DownloadIcon,
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
  EyeIcon,
  FileCodeIcon,
  FileIcon,
  FileTextIcon,
  FolderIcon,
  FolderOpenIcon,
  FolderSearchIcon,
  HelpCircleIcon,
  KeyboardIcon,
  LanguagesIcon,
  LayoutIcon,
  LogOutIcon,
  MailIcon,
  MonitorIcon,
  MoonIcon,
  MoreHorizontalIcon,
  PaletteIcon,
  SaveIcon,
  SettingsIcon,
  ShieldIcon,
  SunIcon,
  UserIcon,
} from "@falcon/ui-kit";
import { useState } from "react";


export function Example() {
  const [notifications, setNotifications] = useState({
    email: true,
    sms: false,
    push: true,
  });
  const [theme, setTheme] = useState("light");


  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Complex Menu
      </DropdownMenuTrigger>
      <DropdownMenuContent className="tw:w-44">
        <DropdownMenuGroup>
          <DropdownMenuLabel>File</DropdownMenuLabel>
          <DropdownMenuItem>
            <FileIcon />
            New File
            <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <FolderIcon />
            New Folder
            <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <FolderOpenIcon />
              Open Recent
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuGroup>
                <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
                <DropdownMenuItem>
                  <FileCodeIcon />
                  Project Alpha
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <FileCodeIcon />
                  Project Beta
                </DropdownMenuItem>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <MoreHorizontalIcon />
                    More Projects
                  </DropdownMenuSubTrigger>
                  <DropdownMenuSubContent>
                    <DropdownMenuItem>
                      <FileCodeIcon />
                      Project Gamma
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <FileCodeIcon />
                      Project Delta
                    </DropdownMenuItem>
                  </DropdownMenuSubContent>
                </DropdownMenuSub>
              </DropdownMenuGroup>
              <DropdownMenuSeparator />
              <DropdownMenuGroup>
                <DropdownMenuItem>
                  <FolderSearchIcon />
                  Browse...
                </DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            <SaveIcon />
            Save
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <DownloadIcon />
            Export
            <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuLabel>View</DropdownMenuLabel>
          <DropdownMenuCheckboxItem
            checked={notifications.email}
            onCheckedChange={(checked) =>
              setNotifications({ ...notifications, email: checked === true })
            }
          >
            <EyeIcon />
            Show Sidebar
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={notifications.sms}
            onCheckedChange={(checked) =>
              setNotifications({ ...notifications, sms: checked === true })
            }
          >
            <LayoutIcon />
            Show Status Bar
          </DropdownMenuCheckboxItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <PaletteIcon />
              Theme
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuGroup>
                <DropdownMenuLabel>Appearance</DropdownMenuLabel>
                <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
                  <DropdownMenuRadioItem value="light">
                    <SunIcon />
                    Light
                  </DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="dark">
                    <MoonIcon />
                    Dark
                  </DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="system">
                    <MonitorIcon />
                    System
                  </DropdownMenuRadioItem>
                </DropdownMenuRadioGroup>
              </DropdownMenuGroup>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuLabel>Account</DropdownMenuLabel>
          <DropdownMenuItem>
            <UserIcon />
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <CreditCardIcon />
            Billing
          </DropdownMenuItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <SettingsIcon />
              Settings
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuGroup>
                <DropdownMenuLabel>Preferences</DropdownMenuLabel>
                <DropdownMenuItem>
                  <KeyboardIcon />
                  Keyboard Shortcuts
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <LanguagesIcon />
                  Language
                </DropdownMenuItem>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <BellIcon />
                    Notifications
                  </DropdownMenuSubTrigger>
                  <DropdownMenuSubContent>
                    <DropdownMenuGroup>
                      <DropdownMenuLabel>Notification Types</DropdownMenuLabel>
                      <DropdownMenuCheckboxItem
                        checked={notifications.push}
                        onCheckedChange={(checked) =>
                          setNotifications({
                            ...notifications,
                            push: checked === true,
                          })
                        }
                      >
                        <BellIcon />
                        Push Notifications
                      </DropdownMenuCheckboxItem>
                      <DropdownMenuCheckboxItem
                        checked={notifications.email}
                        onCheckedChange={(checked) =>
                          setNotifications({
                            ...notifications,
                            email: checked === true,
                          })
                        }
                      >
                        <MailIcon />
                        Email Notifications
                      </DropdownMenuCheckboxItem>
                    </DropdownMenuGroup>
                  </DropdownMenuSubContent>
                </DropdownMenuSub>
              </DropdownMenuGroup>
              <DropdownMenuSeparator />
              <DropdownMenuGroup>
                <DropdownMenuItem>
                  <ShieldIcon />
                  Privacy & Security
                </DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <HelpCircleIcon />
            Help & Support
          </DropdownMenuItem>
          <DropdownMenuItem>
            <FileTextIcon />
            Documentation
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem variant="destructive">
            <LogOutIcon />
            Sign Out
            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

API

Section titled “API”
Section titled “DropdownMenu”

Groups all parts of the menu.

Props

Section titled “Props”
children
Section titled “children”
children?: React.ReactNode

The content of the menu.

closeParentOnEsc
Section titled “closeParentOnEsc”
closeParentOnEsc?: boolean

Whether pressing Escape in a submenu closes the entire menu.

defaultOpen
Section titled “defaultOpen”
defaultOpen?: boolean

Whether the menu is initially open. To render a controlled menu, use open.

defaultTriggerId
Section titled “defaultTriggerId”
defaultTriggerId?: string | null

ID of the trigger associated with an initially open menu.

disabled
Section titled “disabled”
disabled?: boolean

Whether the component should ignore user interaction.

highlightItemOnHover
Section titled “highlightItemOnHover”
highlightItemOnHover?: boolean

Whether moving the pointer over items should highlight them.

loopFocus
Section titled “loopFocus”
loopFocus?: boolean

Whether to loop keyboard focus to the first item after the last item.

Section titled “modal”
modal?: boolean

Whether the menu limits interaction to itself while open.

onOpenChange
Section titled “onOpenChange”
onOpenChange?: ((open: boolean, eventDetails: MenuPrimitive.Root.ChangeEventDetails) => void)

Event handler called when the menu is opened or closed.

onOpenChangeComplete
Section titled “onOpenChangeComplete”
onOpenChangeComplete?: ((open: boolean) => void)

Event handler called after close animations complete.

open
Section titled “open”
open?: boolean

Whether the menu is currently open.

orientation
Section titled “orientation”
orientation?: MenuRootOrientation

The menu’s visual orientation and keyboard navigation direction.

triggerId
Section titled “triggerId”
triggerId?: string | null

ID of the trigger associated with a controlled menu.

Section titled “DropdownMenuCheckboxItem”

Toggles a setting on or off. Renders a <div> element.

Props

Section titled “Props”
checked
Section titled “checked”
checked?: boolean

Whether the checkbox item is currently ticked.

className
Section titled “className”
className?: string

CSS class applied to the element.

closeOnClick
Section titled “closeOnClick”
closeOnClick?: boolean

Whether to close the menu when the item is clicked.

defaultChecked
Section titled “defaultChecked”
defaultChecked?: boolean

Whether the checkbox item is initially ticked.

disabled
Section titled “disabled”
disabled?: boolean

Whether the component should ignore user interaction.

id
Section titled “id”
id?: string
inset
Section titled “inset”
inset?: boolean

Whether to align the item with inset menu items.

label
Section titled “label”
label?: string

Text used to match the item during keyboard text navigation.

nativeButton
Section titled “nativeButton”
nativeButton?: boolean

Whether the element passed to render is a native button.

onCheckedChange
Section titled “onCheckedChange”
onCheckedChange?: ((checked: boolean, eventDetails: MenuPrimitive.CheckboxItem.ChangeEventDetails) => void)

Event handler called when the checkbox item is ticked or unticked.

onClick
Section titled “onClick”
onClick?: ((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)

Click handler for the menu item.

render
Section titled “render”
render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuCheckboxItemState>

Allows replacing the element or composing it with another component.

style
Section titled “style”
style?: React.CSSProperties | ((state: MenuCheckboxItemState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style based on its state.

Section titled “DropdownMenuContent”

Contains menu items in a positioned portal. Renders a <div> element.

Props

Section titled “Props”
align
Section titled “align”
align?: Align = "start"

The alignment of the menu relative to its trigger.

alignOffset
Section titled “alignOffset”
alignOffset?: number | OffsetFunction = 0

The offset from the aligned position, in pixels.

children
Section titled “children”
children?: React.ReactNode
className
Section titled “className”
className?: string

CSS class applied to the menu.

finalFocus
Section titled “finalFocus”
finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)

Determines the element to focus when the menu is closed.

id
Section titled “id”
id?: string
render
Section titled “render”
render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPopupState>

Allows replacing the menu element or composing it with another component.

side
Section titled “side”
side?: Side = "bottom"

The side of the trigger where the menu is placed.

sideOffset
Section titled “sideOffset”
sideOffset?: number | OffsetFunction = 4

The offset from the trigger, in pixels.

style
Section titled “style”
style?: React.CSSProperties | ((state: MenuPopupState) => React.CSSProperties | undefined)

Style applied to the menu, or a function that returns a style based on its state.

Section titled “DropdownMenuGroup”

Groups related menu items with a corresponding label. Renders a <div> element.

Props

Section titled “Props”
children
Section titled “children”
children?: React.ReactNode
className
Section titled “className”
className?: string | ((state: MenuGroupState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on its state.

render
Section titled “render”
render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuGroupState>

Allows replacing the element or composing it with another component.

style
Section titled “style”
style?: React.CSSProperties | ((state: MenuGroupState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style based on its state.

Section titled “DropdownMenuItem”

An interactive menu item. Renders a <div> element.

Props

Section titled “Props”
className
Section titled “className”
className?: string

CSS class applied to the element.

closeOnClick
Section titled “closeOnClick”
closeOnClick?: boolean

Whether to close the menu when the item is clicked.

disabled
Section titled “disabled”
disabled?: boolean

Whether the component should ignore user interaction.

id
Section titled “id”
id?: string
inset
Section titled “inset”
inset?: boolean

Whether to align the item with checkbox and radio item labels.

label
Section titled “label”
label?: string

Text used to match the item during keyboard text navigation.

nativeButton
Section titled “nativeButton”
nativeButton?: boolean

Whether the element passed to render is a native button.

onClick
Section titled “onClick”
onClick?: ((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)

Click handler for the menu item.

render
Section titled “render”
render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuItemState>

Allows replacing the element or composing it with another component.

style
Section titled “style”
style?: React.CSSProperties | ((state: MenuItemState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style based on its state.

variant
Section titled “variant”
variant?: "default" | "destructive" = "default"

Controls the item’s appearance.

Section titled “DropdownMenuLabel”

Labels its parent menu group. Renders a <div> element.

Props

Section titled “Props”
className
Section titled “className”
className?: string

CSS class applied to the element.

inset
Section titled “inset”
inset?: boolean

Whether to align the label with inset menu items.

render
Section titled “render”
render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuGroupLabelState>

Allows replacing the element or composing it with another component.

style
Section titled “style”
style?: React.CSSProperties | ((state: MenuGroupLabelState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style based on its state.

Section titled “DropdownMenuRadioGroup”

Groups related radio items. Renders a <div> element. Infers its value type from value, defaultValue, and onValueChange; use the same value type for each DropdownMenuRadioItem.

Props

Section titled “Props”
children
Section titled “children”
children?: React.ReactNode
className
Section titled “className”
className?: string | ((state: MenuRadioGroupState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on its state.

defaultValue
Section titled “defaultValue”
defaultValue?: TValue

The uncontrolled value of the initially selected radio item.

disabled
Section titled “disabled”
disabled?: boolean

Whether the component should ignore user interaction.

onValueChange
Section titled “onValueChange”
onValueChange?: ((value: TValue, eventDetails: Parameters<NonNullable<MenuPrimitive.RadioGroup.Props["onValueChange"]>>[1]) => void)

Event handler called when the selected value changes.

render
Section titled “render”
render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioGroupState>

Allows replacing the element or composing it with another component.

style
Section titled “style”
style?: React.CSSProperties | ((state: MenuRadioGroupState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style based on its state.

value
Section titled “value”
value?: TValue

The controlled value of the currently selected radio item.

Section titled “DropdownMenuRadioItem”

Selects one value in its parent radio group. Renders a <div> element.

Props

Section titled “Props”
className
Section titled “className”
className?: string

CSS class applied to the element.

closeOnClick
Section titled “closeOnClick”
closeOnClick?: boolean

Whether to close the menu when the item is clicked.

disabled
Section titled “disabled”
disabled?: boolean

Whether the component should ignore user interaction.

id
Section titled “id”
id?: string
inset
Section titled “inset”
inset?: boolean

Whether to align the item with inset menu items.

label
Section titled “label”
label?: string

Text used to match the item during keyboard text navigation.

nativeButton
Section titled “nativeButton”
nativeButton?: boolean

Whether the element passed to render is a native button.

onClick
Section titled “onClick”
onClick?: ((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)

Click handler for the menu item.

render
Section titled “render”
render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuRadioItemState>

Allows replacing the element or composing it with another component.

style
Section titled “style”
style?: React.CSSProperties | ((state: MenuRadioItemState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style based on its state.

value
Section titled “value”
value: unknown

Value set in the parent radio group when this item is selected.

Section titled “DropdownMenuSeparator”

Visually and semantically separates groups of menu items. Renders a <div> element.

Props

Section titled “Props”
className
Section titled “className”
className?: string

CSS class applied to the element.

orientation
Section titled “orientation”
orientation?: Orientation

The orientation of the separator.

render
Section titled “render”
render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>

Allows replacing the element or composing it with another component.

style
Section titled “style”
style?: React.CSSProperties | ((state: SeparatorState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style based on its state.

Section titled “DropdownMenuShortcut”

A menu item’s keyboard shortcut hint. Renders a <span> element and accepts standard <span> props. It does not register a keyboard handler; implement the matching shortcut in the application.

Section titled “DropdownMenuSub”

Groups all parts of a submenu.

Props

Section titled “Props”
children
Section titled “children”
children?: React.ReactNode

The content of the submenu.

closeParentOnEsc
Section titled “closeParentOnEsc”
closeParentOnEsc?: boolean

Whether pressing Escape closes the entire menu instead of only this submenu.

defaultOpen
Section titled “defaultOpen”
defaultOpen?: boolean

Whether the submenu is initially open. To render a controlled submenu, use open.

disabled
Section titled “disabled”
disabled?: boolean

Whether the component should ignore user interaction.

highlightItemOnHover
Section titled “highlightItemOnHover”
highlightItemOnHover?: boolean

Whether moving the pointer over items should highlight them.

loopFocus
Section titled “loopFocus”
loopFocus?: boolean

Whether to loop keyboard focus to the first item after the last item.

onOpenChange
Section titled “onOpenChange”
onOpenChange?: ((open: boolean, eventDetails: MenuPrimitive.SubmenuRoot.ChangeEventDetails) => void)

Event handler called when the submenu is opened or closed.

onOpenChangeComplete
Section titled “onOpenChangeComplete”
onOpenChangeComplete?: ((open: boolean) => void)

Event handler called after close animations complete.

open
Section titled “open”
open?: boolean

Whether the submenu is currently open.

orientation
Section titled “orientation”
orientation?: MenuRootOrientation

The submenu’s visual orientation and keyboard navigation direction.

Section titled “DropdownMenuSubContent”

Renders a <DropdownMenuContent> element for a submenu.

Props

Section titled “Props”
align
Section titled “align”
align?: Align = "start"

The alignment of the menu relative to its trigger.

alignOffset
Section titled “alignOffset”
alignOffset?: number | OffsetFunction = -3

The offset from the aligned position, in pixels.

children
Section titled “children”
children?: React.ReactNode
className
Section titled “className”
className?: string

CSS class applied to the menu.

finalFocus
Section titled “finalFocus”
finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)

Determines the element to focus when the menu is closed.

id
Section titled “id”
id?: string
render
Section titled “render”
render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuPopupState>

Allows replacing the menu element or composing it with another component.

side
Section titled “side”
side?: Side = "right"

The side of the trigger where the menu is placed.

sideOffset
Section titled “sideOffset”
sideOffset?: number | OffsetFunction = 0

The offset from the trigger, in pixels.

style
Section titled “style”
style?: React.CSSProperties | ((state: MenuPopupState) => React.CSSProperties | undefined)

Style applied to the menu, or a function that returns a style based on its state.

Section titled “DropdownMenuSubTrigger”

Opens the associated submenu. Renders a <div> element.

Props

Section titled “Props”
className
Section titled “className”
className?: string

CSS class applied to the element.

closeDelay
Section titled “closeDelay”
closeDelay?: number

How long to wait before closing a submenu opened on hover, in milliseconds.

delay
Section titled “delay”
delay?: number

How long to wait before opening a submenu on hover, in milliseconds.

disabled
Section titled “disabled”
disabled?: boolean

Whether the component should ignore user interaction.

id
Section titled “id”
id?: string
inset
Section titled “inset”
inset?: boolean

Whether to align the trigger with checkbox and radio item labels.

label
Section titled “label”
label?: string

Text used to match the item during keyboard text navigation.

nativeButton
Section titled “nativeButton”
nativeButton?: boolean

Whether the element passed to render is a native button.

onClick
Section titled “onClick”
onClick?: ((event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void)

Click handler for the submenu trigger.

openOnHover
Section titled “openOnHover”
openOnHover?: boolean

Whether the submenu should also open when the trigger is hovered.

render
Section titled “render”
render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuSubmenuTriggerState>

Allows replacing the element or composing it with another component.

style
Section titled “style”
style?: React.CSSProperties | ((state: MenuSubmenuTriggerState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style based on its state.

Section titled “DropdownMenuTrigger”

Opens the associated menu. Renders a <button> element.

Props

Section titled “Props”
children
Section titled “children”
children?: React.ReactNode
className
Section titled “className”
className?: string | ((state: MenuTriggerState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on its state.

closeDelay
Section titled “closeDelay”
closeDelay?: number

How long to wait before closing a menu opened on hover, in milliseconds.

delay
Section titled “delay”
delay?: number

How long to wait before opening a menu on hover, in milliseconds.

disabled
Section titled “disabled”
disabled?: boolean

Whether the component should ignore user interaction.

nativeButton
Section titled “nativeButton”
nativeButton?: boolean

Whether the element passed to render is a native button.

openOnHover
Section titled “openOnHover”
openOnHover?: boolean

Whether the menu should also open when the trigger is hovered.

render
Section titled “render”
render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MenuTriggerState>

Allows replacing the element or composing it with another component.

style
Section titled “style”
style?: React.CSSProperties | ((state: MenuTriggerState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style based on its state.