Context Menu · Base UI

Right-click hereOpens animated context menu with smooth spring transitions

An animated context 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:

Update the import paths to match your project setup.

File Structure

context-menu.tsx

use-controlled-state.tsx

Usage

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/sora-ui/base/context-menu";

export default function Page() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed border-border bg-muted/20">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘+[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem disabled>
          Forward
          <ContextMenuShortcut>⌘+]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘+R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Save Page As…</ContextMenuItem>
            <ContextMenuItem>Developer Tools</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
      </ContextMenuContent>
    </ContextMenu>
  );
}

RTL

انقر بزر الفأرة الأيمن هناافتح القائمة السياقية من اليمين إلى اليسار

The same context 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 {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/sora-ui/base/context-menu";

export default function RtlContextMenu() {
  return (
    <DirectionProvider direction="rtl">
      <div dir="rtl">
        <ContextMenu>
          <ContextMenuTrigger>انقر بزر الفأرة الأيمن هنا</ContextMenuTrigger>
          <ContextMenuContent dir="rtl">
            <ContextMenuItem>نسخ</ContextMenuItem>
            <ContextMenuSub>
              <ContextMenuSubTrigger>المزيد من الخيارات</ContextMenuSubTrigger>
              <ContextMenuSubContent dir="rtl">
                <ContextMenuItem>أدوات المطور</ContextMenuItem>
              </ContextMenuSubContent>
            </ContextMenuSub>
          </ContextMenuContent>
        </ContextMenu>
      </div>
    </DirectionProvider>
  );
}

Nested submenus open toward the logical inline end, check and radio indicators move to the correct side, and submenu animations follow the active direction.

Examples

File Actions

app-layout.tsxRight-click file card for quick actions

Context menu tailored for file systems with action icons, quick shortcuts, nested sharing options, and danger actions.

Props

ContextMenu

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

ContextMenuContent

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`
`positionerClassName?`	`string`	-

ContextMenuItem

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

ContextMenuCheckboxItem

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

ContextMenuRadioItem

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

ContextMenuSubTrigger

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

ContextMenuSubContent

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

Built by Axyl. A motion-first component registry for React.

Right-click hereOpens animated context menu with smooth spring transitions

An animated context 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:

Update the import paths to match your project setup.

File Structure

context-menu.tsx

use-controlled-state.tsx

Usage

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/sora-ui/base/context-menu";

export default function Page() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed border-border bg-muted/20">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘+[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem disabled>
          Forward
          <ContextMenuShortcut>⌘+]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘+R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Save Page As…</ContextMenuItem>
            <ContextMenuItem>Developer Tools</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
      </ContextMenuContent>
    </ContextMenu>
  );
}

RTL

انقر بزر الفأرة الأيمن هناافتح القائمة السياقية من اليمين إلى اليسار

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

import { DirectionProvider } from "@base-ui/react/direction-provider";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/sora-ui/base/context-menu";

export default function RtlContextMenu() {
  return (
    <DirectionProvider direction="rtl">
      <div dir="rtl">
        <ContextMenu>
          <ContextMenuTrigger>انقر بزر الفأرة الأيمن هنا</ContextMenuTrigger>
          <ContextMenuContent dir="rtl">
            <ContextMenuItem>نسخ</ContextMenuItem>
            <ContextMenuSub>
              <ContextMenuSubTrigger>المزيد من الخيارات</ContextMenuSubTrigger>
              <ContextMenuSubContent dir="rtl">
                <ContextMenuItem>أدوات المطور</ContextMenuItem>
              </ContextMenuSubContent>
            </ContextMenuSub>
          </ContextMenuContent>
        </ContextMenu>
      </div>
    </DirectionProvider>
  );
}

Nested submenus open toward the logical inline end, check and radio indicators move to the correct side, and submenu animations follow the active direction.

Examples

File Actions

app-layout.tsxRight-click file card for quick actions

Context menu tailored for file systems with action icons, quick shortcuts, nested sharing options, and danger actions.

Props

ContextMenu

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

ContextMenuContent

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`
`positionerClassName?`	`string`	-

ContextMenuItem

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

ContextMenuCheckboxItem

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

ContextMenuRadioItem

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

ContextMenuSubTrigger

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

ContextMenuSubContent

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

Built by Axyl. A motion-first component registry for React.

Right-click hereOpens animated context menu with smooth spring transitions

An animated context 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:

Update the import paths to match your project setup.

File Structure

context-menu.tsx

use-controlled-state.tsx

Usage

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/sora-ui/base/context-menu";

export default function Page() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed border-border bg-muted/20">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘+[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem disabled>
          Forward
          <ContextMenuShortcut>⌘+]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘+R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Save Page As…</ContextMenuItem>
            <ContextMenuItem>Developer Tools</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
      </ContextMenuContent>
    </ContextMenu>
  );
}

RTL

انقر بزر الفأرة الأيمن هناافتح القائمة السياقية من اليمين إلى اليسار

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

import { DirectionProvider } from "@base-ui/react/direction-provider";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/sora-ui/base/context-menu";

export default function RtlContextMenu() {
  return (
    <DirectionProvider direction="rtl">
      <div dir="rtl">
        <ContextMenu>
          <ContextMenuTrigger>انقر بزر الفأرة الأيمن هنا</ContextMenuTrigger>
          <ContextMenuContent dir="rtl">
            <ContextMenuItem>نسخ</ContextMenuItem>
            <ContextMenuSub>
              <ContextMenuSubTrigger>المزيد من الخيارات</ContextMenuSubTrigger>
              <ContextMenuSubContent dir="rtl">
                <ContextMenuItem>أدوات المطور</ContextMenuItem>
              </ContextMenuSubContent>
            </ContextMenuSub>
          </ContextMenuContent>
        </ContextMenu>
      </div>
    </DirectionProvider>
  );
}

Nested submenus open toward the logical inline end, check and radio indicators move to the correct side, and submenu animations follow the active direction.

Examples

File Actions

app-layout.tsxRight-click file card for quick actions

Context menu tailored for file systems with action icons, quick shortcuts, nested sharing options, and danger actions.

Props

ContextMenu

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

ContextMenuContent

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`
`positionerClassName?`	`string`	-

ContextMenuItem

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

ContextMenuCheckboxItem

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

ContextMenuRadioItem

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

ContextMenuSubTrigger

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

ContextMenuSubContent

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

Built by Axyl. A motion-first component registry for React.

Right-click hereOpens animated context menu with smooth spring transitions

An animated context 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:

Update the import paths to match your project setup.

File Structure

context-menu.tsx

use-controlled-state.tsx

Usage

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/sora-ui/base/context-menu";

export default function Page() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed border-border bg-muted/20">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘+[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem disabled>
          Forward
          <ContextMenuShortcut>⌘+]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘+R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Save Page As…</ContextMenuItem>
            <ContextMenuItem>Developer Tools</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
      </ContextMenuContent>
    </ContextMenu>
  );
}

RTL

انقر بزر الفأرة الأيمن هناافتح القائمة السياقية من اليمين إلى اليسار

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

import { DirectionProvider } from "@base-ui/react/direction-provider";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/sora-ui/base/context-menu";

export default function RtlContextMenu() {
  return (
    <DirectionProvider direction="rtl">
      <div dir="rtl">
        <ContextMenu>
          <ContextMenuTrigger>انقر بزر الفأرة الأيمن هنا</ContextMenuTrigger>
          <ContextMenuContent dir="rtl">
            <ContextMenuItem>نسخ</ContextMenuItem>
            <ContextMenuSub>
              <ContextMenuSubTrigger>المزيد من الخيارات</ContextMenuSubTrigger>
              <ContextMenuSubContent dir="rtl">
                <ContextMenuItem>أدوات المطور</ContextMenuItem>
              </ContextMenuSubContent>
            </ContextMenuSub>
          </ContextMenuContent>
        </ContextMenu>
      </div>
    </DirectionProvider>
  );
}

Nested submenus open toward the logical inline end, check and radio indicators move to the correct side, and submenu animations follow the active direction.

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

ContextMenuContent

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`
`positionerClassName?`	`string`	-

ContextMenuItem

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

ContextMenuCheckboxItem

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

ContextMenuRadioItem

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

ContextMenuSubTrigger

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

ContextMenuSubContent

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

Built by Axyl. A motion-first component registry for React.

Context Menu · Base UI

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

On this page

Context Menu · Base UI

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

On this page

Context Menu · Base UI

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

On this page

Context Menu · Base UI

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

On this page