🚧 This website is work in progress 👷
Components
Actions
ContextMenu
Published

ContextMenu

Menus serve a variety of purposes for users, including enabling them to take actions, select options from a list, configure settings, and perform other related tasks. These menus can be positioned within a transient container, such as a popover or tray.

Import statement

import { ContextMenu, ContextMenuGroup, ContextMenuItem } from "@wfp/react"

Usage

Context menu are used as navigational elements. They should contain commands that apply to the target object.

Regular ContextMenu

Expand code

Editable Example

import {
  ContextMenu,
  ContextMenuGroup,
  ContextMenuItem,
} from "@wfp/react";

<ContextMenu
  content={
    <>
      <ContextMenuGroup>
        <ContextMenuItem>Itemgroup 1</ContextMenuItem>
        <ContextMenuItem>Itemgroup 2</ContextMenuItem>
        <ContextMenuItem>Itemgroup 3</ContextMenuItem>
      </ContextMenuGroup>
      <ContextMenuItem>Item 1</ContextMenuItem>
      <ContextMenuItem>Item 2</ContextMenuItem>
      <ContextMenuItem>Item 3</ContextMenuItem>
    </>
  }
>
  <span>Open context menu</span>
</ContextMenu>;

Context Menu With Border Bottom

Expand code

Editable Example

import {
  ContextMenu,
  ContextMenuGroup,
  ContextMenuItem,
} from "@wfp/react";

<ContextMenu
  withBorder={true}
  content={
    <>
      <ContextMenuGroup>
        <ContextMenuItem>Itemgroup 1</ContextMenuItem>
        <ContextMenuItem>Itemgroup 2</ContextMenuItem>
        <ContextMenuItem>Itemgroup 3</ContextMenuItem>
      </ContextMenuGroup>
      <ContextMenuItem>Item 1</ContextMenuItem>
      <ContextMenuItem>Item 2</ContextMenuItem>
      <ContextMenuItem>Item 3</ContextMenuItem>
    </>
  }
>
  <span>Open context menu</span>
</ContextMenu>;

Context Menu With Nested Context Menu

Expand code

Editable Example

import {
  ContextMenu,
  ContextMenuGroup,
  ContextMenuItem,
} from "@wfp/react";
import { HeaderChevron } from "@wfp/icons-react";

<ContextMenu
  withBorder={true}
  content={
    <>
      <ContextMenuGroup>
        <ContextMenuItem>Itemgroup 1</ContextMenuItem>
        <ContextMenuItem>Itemgroup 2</ContextMenuItem>
        <ContextMenuItem>Itemgroup 3</ContextMenuItem>
      </ContextMenuGroup>
      <ContextMenuItem>
        <ContextMenu
          placement="right"
          content={
            <>
              <ContextMenuItem>
                Itemgroup 1
              </ContextMenuItem>
              <ContextMenuItem>
                Itemgroup 2
              </ContextMenuItem>
              <ContextMenuItem>
                Itemgroup 3
              </ContextMenuItem>
            </>
          }
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            Submenu item <HeaderChevron />
          </div>
        </ContextMenu>
      </ContextMenuItem>
    </>
  }
>
  <span>Open context menu with border</span>
</ContextMenu>;

On this page

References