Context menu

List of contextual actions located at the event pointer coordinates

Import

import { ContextMenu } from "reshaped";
import type { ContextMenuProps } from "reshaped";

Related components

Storybook

Right-click me

Usage

ContextMenu exposes multiple compound components that you can use to create a list of items, item sections and sub-menus.

<ContextMenu>
  <View
    height={50}
    width={50}
    backgroundColor="neutral-faded"
    borderRadius="medium"
    justify="center"
    align="center"
  />

  <ContextMenu.Content>
    <ContextMenu.Item>Action 1</ContextMenu.Item>
    <ContextMenu.Item>Action 2</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu>

ContextMenu itself serves as the root wrapper for the component.

ContextMenu.Content is a wrapper for the overlaying content with menu items.
Any other component you pass as children to the ContextMenu will receive right click event handler to open the menu.
ContextMenu.Item implementation is based on the MenuItem component. It has className, size, and roundedCorners properties predefined and supports all other MenuItem properties.

ContextMenu supports most of the properties DropdownMenu does, allowing you to use its event handlers or position it differently. It will automatically try to fit into the viewport, using the position you pass as a default.

Sections

ContextMenu supports separating items into sections using the ContextMenu.Section component.

<ContextMenu>
  <View
    height={50}
    width={50}
    backgroundColor="neutral-faded"
    borderRadius="medium"
    justify="center"
    align="center"
  />

  <ContextMenu.Content>
    <ContextMenu.Section>
      <ContextMenu.Item>Action 1</ContextMenu.Item>
      <ContextMenu.Item>Action 2</ContextMenu.Item>
    </ContextMenu.Section>
    <ContextMenu.Section>
      <ContextMenu.Item>Action 3</ContextMenu.Item>
      <ContextMenu.Item>Action 4</ContextMenu.Item>
    </ContextMenu.Section>
  </ContextMenu.Content>
</ContextMenu>

Nested menus

You can create one or multiple submenus inside your ContextMenu using ContextMenu.SubMenu and ContextMenu.SubTrigger. It automatically handles focus trapping for multiple levels of nesting.

<ContextMenu>
  <View
    height={50}
    width={50}
    backgroundColor="neutral-faded"
    borderRadius="medium"
    justify="center"
    align="center"
  />

  <ContextMenu.Content>
    <ContextMenu.Item>Action 1</ContextMenu.Item>
    <ContextMenu.Item>Action 2</ContextMenu.Item>
    <ContextMenu.SubMenu>
      <ContextMenu.SubTrigger>Action 3</ContextMenu.SubTrigger>
      <ContextMenu.Content>
        <ContextMenu.Item onClick={() => {}}>Sub-action 1</ContextMenu.Item>
        <ContextMenu.Item onClick={() => {}}>Sub-action 2</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.SubMenu>
  </ContextMenu.Content>
</ContextMenu>

Keyboard interactions

ArrowUp / ArrowDown - navigate the menu items
Enter / Space - select the focused menu item
Esc - close the dropdown
Tab - close the dropdown and move the focus to the next element after the trigger
Shift + Tab - close the dropdown and keep the focus on the trigger
ArrowRight / Enter - open the submenu if a subtrigger is focused
ArrowLeft / Esc - close the submenu

Checkbox

Divider