Dropdown Menu · Radix UI

An accessible dropdown menu component built on Radix 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/radix/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/radix/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 Radix UI DirectionProvider.

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

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

export default function RtlDropdownMenu() {
  return (
    <DirectionProvider dir="rtl">
      <div dir="rtl">
        <DropdownMenu>
          <DropdownMenuTrigger>فتح القائمة</DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem>الملف الشخصي</DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>المزيد من الخيارات</DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                <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
`side?`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`sideOffset?`	`number`	`4`
`align?`	`"start" \| "center" \| "end"`	`"start"`
`alignOffset?`	`number`	`0`
`disableAnimation?`	`boolean`	`false`

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/radix/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/radix/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 Radix UI DirectionProvider.

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

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

Prop

Type

Default

open?

boolean

defaultOpen?

boolean

false

onOpenChange?

(open: boolean) => void

Prop

Type

Default

side?

"top" | "right" | "bottom" | "left"

"bottom"

sideOffset?

number

4

align?

"start" | "center" | "end"

"start"

alignOffset?

number

0

disableAnimation?

boolean

false

Dropdown Menu · Radix 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

On this page

Dropdown Menu · Radix 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

On this page