Dropdown Menu · Base UI

An accessible dropdown menu component built on Base UI with smooth Motion spring scale and submenu slide animations.

dropdown-menu.tsx

Loading code…

An animated dropdown menu with spring entrance transitions, nested submenus, checkable items, radio items, shortcuts, and destructive styling.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/base/dropdown-menu.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

dropdown-menu.tsx

use-controlled-state.tsx

Usage

import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/sora-ui/base/dropdown-menu";

export default function Page() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Open</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuItem>
            Profile
            <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings
            <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>More Tools</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Developer Tools</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Delete Account</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

RTL

dropdown-menu-rtl.tsx

Loading code…

The same dropdown menu pattern rendered right-to-left with Base UI DirectionProvider.

Use Base UI's DirectionProvider together with dir="rtl" on the demo container to render the menu from right to left. The provider keeps popup positioning and keyboard navigation aware of the text direction.

import { DirectionProvider } from "@base-ui/react/direction-provider";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/sora-ui/base/dropdown-menu";

export default function RtlDropdownMenu() {
  return (
    <DirectionProvider direction="rtl">
      <div dir="rtl">
        <DropdownMenu>
          <DropdownMenuTrigger>فتح القائمة</DropdownMenuTrigger>
          <DropdownMenuContent align="end" dir="rtl">
            <DropdownMenuItem>الملف الشخصي</DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>المزيد من الخيارات</DropdownMenuSubTrigger>
              <DropdownMenuSubContent dir="rtl">
                <DropdownMenuItem>أدوات المطور</DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </DirectionProvider>
  );
}

Props

DropdownMenu

Prop	Type	Default
`open?`	`boolean`	-
`defaultOpen?`	`boolean`	`false`
`onOpenChange?`	`(open: boolean) => void`	-

DropdownMenuContent

Prop	Type	Default
`align?`	`"start" \| "center" \| "end"`	`"start"`
`alignOffset?`	`number`	`0`
`side?`	`"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"`	`"bottom"`
`sideOffset?`	`number`	`4`
`disableAnimation?`	`boolean`	`false`
`positionerClassName?`	`string`	-

DropdownMenuItem

Prop	Type	Default
`disabled?`	`boolean`	`false`
`inset?`	`boolean`	`false`
`variant?`	`"default" \| "destructive"`	`"default"`

DropdownMenuCheckboxItem

Prop	Type	Default
`checked?`	`boolean`	-
`onCheckedChange?`	`(checked: boolean) => void`	-
`disabled?`	`boolean`	`false`
`inset?`	`boolean`	`false`

DropdownMenuRadioItem

Prop	Type	Default
`value?`	`string`	-
`disabled?`	`boolean`	`false`
`inset?`	`boolean`	`false`

DropdownMenuSubTrigger

Prop	Type	Default
`disabled?`	`boolean`	`false`
`inset?`	`boolean`	`false`

DropdownMenuSubContent

Prop	Type	Default
`align?`	`"start" \| "center" \| "end"`	`"start"`
`alignOffset?`	`number`	`-4`
`side?`	`"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"`	`"right"`
`sideOffset?`	`number`	`0`
`disableAnimation?`	`boolean`	`false`

dropdown-menu.tsx

Loading code…

An animated dropdown menu with spring entrance transitions, nested submenus, checkable items, radio items, shortcuts, and destructive styling.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/base/dropdown-menu.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

dropdown-menu.tsx

use-controlled-state.tsx

Usage

import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/sora-ui/base/dropdown-menu";

export default function Page() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Open</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuItem>
            Profile
            <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings
            <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>More Tools</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Developer Tools</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Delete Account</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

RTL

dropdown-menu-rtl.tsx

Loading code…

The same dropdown menu pattern rendered right-to-left with Base UI DirectionProvider.

import { DirectionProvider } from "@base-ui/react/direction-provider";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/sora-ui/base/dropdown-menu";

export default function RtlDropdownMenu() {
  return (
    <DirectionProvider direction="rtl">
      <div dir="rtl">
        <DropdownMenu>
          <DropdownMenuTrigger>فتح القائمة</DropdownMenuTrigger>
          <DropdownMenuContent align="end" dir="rtl">
            <DropdownMenuItem>الملف الشخصي</DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>المزيد من الخيارات</DropdownMenuSubTrigger>
              <DropdownMenuSubContent dir="rtl">
                <DropdownMenuItem>أدوات المطور</DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </DirectionProvider>
  );
}

Props

DropdownMenu

Prop	Type	Default
`open?`	`boolean`	-
`defaultOpen?`	`boolean`	`false`
`onOpenChange?`	`(open: boolean) => void`	-

DropdownMenuContent

Prop	Type	Default
`align?`	`"start" \| "center" \| "end"`	`"start"`
`alignOffset?`	`number`	`0`
`side?`	`"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"`	`"bottom"`
`sideOffset?`	`number`	`4`
`disableAnimation?`	`boolean`	`false`
`positionerClassName?`	`string`	-

DropdownMenuItem

Prop	Type	Default
`disabled?`	`boolean`	`false`
`inset?`	`boolean`	`false`
`variant?`	`"default" \| "destructive"`	`"default"`

DropdownMenuCheckboxItem

Prop	Type	Default
`checked?`	`boolean`	-
`onCheckedChange?`	`(checked: boolean) => void`	-
`disabled?`	`boolean`	`false`
`inset?`	`boolean`	`false`

DropdownMenuRadioItem

Prop	Type	Default
`value?`	`string`	-
`disabled?`	`boolean`	`false`
`inset?`	`boolean`	`false`

DropdownMenuSubTrigger

Prop	Type	Default
`disabled?`	`boolean`	`false`
`inset?`	`boolean`	`false`

DropdownMenuSubContent

Prop	Type	Default
`align?`	`"start" \| "center" \| "end"`	`"start"`
`alignOffset?`	`number`	`-4`
`side?`	`"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"`	`"right"`
`sideOffset?`	`number`	`0`
`disableAnimation?`	`boolean`	`false`

Dropdown Menu · Base UI

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

RTL

Props

DropdownMenu

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

DropdownMenuRadioItem

DropdownMenuSubTrigger

DropdownMenuSubContent

On this page

Dropdown Menu · Base UI

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

RTL

Props

DropdownMenu

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

DropdownMenuRadioItem

DropdownMenuSubTrigger

DropdownMenuSubContent

On this page