Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

ContextMenu

ContextMenu is triggered by a right click and displays a menu at the pointer's position.

Source@yamada-ui/menu

Import

import {
  ContextMenu,
  ContextMenuTrigger,
  MenuList,
  MenuItem,
  MenuGroup,
  MenuOptionItem,
  MenuOptionGroup,
  MenuDivider,
} from "@yamada-ui/react"
Copied!
  • ContextMenu: A wrapper component that controls the state of the menu.
  • ContextMenuTrigger: A component that opens and closes the menu.
  • MenuList: A wrapper component that controls the items in the menu.
  • MenuItem: A component for the items in the menu.
  • MenuGroup: A wrapper component that groups items in the menu.
  • MenuOptionItem: A component for selectable menu items (radio and checkbox).
  • MenuOptionGroup: A wrapper component that groups selectable menu items (radio and checkbox).
  • MenuDivider: A component that separates items in the menu.

Usage

Editable example

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Undo</MenuItem>
    <MenuItem>Redo</MenuItem>
    <MenuDivider />
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Accessing Internal State

children are provided with methods such as isOpen and onClose. You can use these to access the internal state.

Editable example

<ContextMenu>
  {({ isOpen }) => (
    <>
      <ContextMenuTrigger
        as={Center}
        w="full"
        h="xs"
        borderWidth="1px"
        borderStyle="dashed"
        p="md"
        rounded="md"
      >
        <Text>{isOpen ? "Opened the Menu" : "Right click here"}</Text>
      </ContextMenuTrigger>

      <MenuList>
        <MenuItem>Cut</MenuItem>
        <MenuItem>Copy</MenuItem>
        <MenuItem>Paste</MenuItem>
      </MenuList>
    </>
  )}
</ContextMenu>
Copied!

Displaying Commands on Items

To display commands on items, set a string to command.

Editable example

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem command="⌘T">New Tab</MenuItem>
    <MenuItem command="⌘N">New Window</MenuItem>
    <MenuItem command="⌘O">Open File</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Displaying Icons on Items

To display icons on items, set a ReactElement to icon.

Editable example

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem icon={<Plus fontSize="lg" />} command="⌘T">
      New Tab
    </MenuItem>
    <MenuItem icon={<ExternalLink fontSize="lg" />} command="⌘N">
      New Window
    </MenuItem>
    <MenuItem icon={<FilePenLine fontSize="lg" />} command="⌘O">
      Open File
    </MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Focusing on Items

When opening the menu, if you want to focus on a specific item, set the target ref to initialFocusRef.

Editable example

const ref = useRef<HTMLButtonElement>(null)

return (
  <ContextMenu initialFocusRef={ref}>
    <ContextMenuTrigger
      as={Center}
      w="full"
      h="xs"
      borderWidth="1px"
      borderStyle="dashed"
      p="md"
      rounded="md"
    >
      <Text>Right click here</Text>
    </ContextMenuTrigger>

    <MenuList>
      <MenuItem>Cut</MenuItem>
      <MenuItem ref={ref}>Copy</MenuItem>
      <MenuItem>Paste</MenuItem>
    </MenuList>
  </ContextMenu>
)
Copied!

Changing the Position

To change the position, set placement to top, left-start, etc. By default, bottom-start is set.

Editable example

<ContextMenu placement="top">
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Changing the Animation

To change the show/hide animation, set animation to top, left, etc. By default, scale is set.

Editable example

<ContextMenu animation="top">
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Changing the Offset

Depending on the size of the element or the situation, you may want to change the position of the menu. In that case, adjust the position with gutter or offset.

gutter allows you to set the difference with simple elements, and offset allows you to set [horizontal, vertical].

Editable example

<Wrap gap="md">
  <ContextMenu gutter={32}>
    <ContextMenuTrigger
      as={Center}
      w="full"
      h="xs"
      borderWidth="1px"
      borderStyle="dashed"
      p="md"
      rounded="md"
    >
      <Text>Right click here</Text>
    </ContextMenuTrigger>

    <MenuList>
      <MenuItem>Cut</MenuItem>
      <MenuItem>Copy</MenuItem>
      <MenuItem>Paste</MenuItem>
    </MenuList>
  </ContextMenu>

  <ContextMenu offset={[16, 16]}>
    <ContextMenuTrigger
      as={Center}
      w="full"
      h="xs"
      borderWidth="1px"
      borderStyle="dashed"
      p="md"
      rounded="md"
    >
      <Text>Right click here</Text>
    </ContextMenuTrigger>

    <MenuList>
      <MenuItem>Cut</MenuItem>
      <MenuItem>Copy</MenuItem>
      <MenuItem>Paste</MenuItem>
    </MenuList>
  </ContextMenu>
</Wrap>
Copied!

Changing the Duration

To change the duration, set a number (seconds) to duration.

Editable example

<ContextMenu duration={0.4}>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Adding Dividers Between Items

By setting MenuDivider between MenuItems, you can add dividers.

Editable example

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>

    <MenuDivider />

    <MenuItem>Delete</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Grouping Items

To group items together, use MenuGroup.

Editable example

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuGroup label="action">
      <MenuItem>Cut</MenuItem>
      <MenuItem>Copy</MenuItem>
      <MenuItem>Paste</MenuItem>
    </MenuGroup>

    <MenuDivider />

    <MenuGroup label="tool">
      <MenuItem>Shortcut</MenuItem>
    </MenuGroup>
  </MenuList>
</ContextMenu>
Copied!

Selectable Items

You can set selectable items like radios or checkboxes using MenuOptionGroup and MenuOptionItem.

Editable example

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuOptionGroup label="order" type="radio">
      <MenuOptionItem value="asc">Ascending</MenuOptionItem>
      <MenuOptionItem value="desc">Descending</MenuOptionItem>
    </MenuOptionGroup>

    <MenuDivider />

    <MenuOptionGroup label="display" type="checkbox">
      <MenuOptionItem value="gender">gender</MenuOptionItem>
      <MenuOptionItem value="email">email</MenuOptionItem>
      <MenuOptionItem value="phone">phone</MenuOptionItem>
    </MenuOptionGroup>
  </MenuList>
</ContextMenu>
Copied!

Nested Menus

To construct nested menus, insert a nested Menu within MenuItem.

Editable example

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>

    <MenuDivider />

    <MenuItem>
      <Menu>
        <MenuItemButton>Settings</MenuItemButton>

        <MenuList>
          <MenuItem>Extensions</MenuItem>
          <MenuItem>
            <Menu>
              <MenuItemButton>Theme</MenuItemButton>

              <MenuList>
                <MenuItem>Color Theme</MenuItem>
                <MenuItem>File Icon Theme</MenuItem>
                <MenuItem>Product Icon Theme</MenuItem>
              </MenuList>
            </Menu>
          </MenuItem>
          <MenuItem>User Tasks</MenuItem>
        </MenuList>
      </Menu>
    </MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Keeping the Menu Open After Item Selection

If you do not want to close the menu upon item selection, set closeOnSelect to false.

Editable example

<ContextMenu closeOnSelect={false}>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem closeOnSelect={true}>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Keeping the Menu Open When Focus is Lost

If you do not want to close the menu when focus is lost, set closeOnSelect to false.

Editable example

<ContextMenu closeOnBlur={false}>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Disabling Items

To disable items, set isDisabled to true.

Editable example

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem isDisabled>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Allowing Focus on Disabled Items

To allow focus on disabled items, set isFocusable to true.

Editable example

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem isDisabled isFocusable>
      Copy
    </MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Lazy Rendering

By default, it is rendered in the DOM regardless of being active. In other words, it is rendered but hidden by style.

If you want to delay rendering until it becomes active, set isLazy to true.

Editable example

<ContextMenu isLazy>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

Controlling

Editable example

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <ContextMenu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
    <ContextMenuTrigger
      as={Center}
      w="full"
      h="xs"
      borderWidth="1px"
      borderStyle="dashed"
      p="md"
      rounded="md"
    >
      <Text>Right click here</Text>
    </ContextMenuTrigger>

    <MenuList>
      <MenuItem>Cut</MenuItem>
      <MenuItem>Copy</MenuItem>
      <MenuItem>Paste</MenuItem>
    </MenuList>
  </ContextMenu>
)
Copied!

Edit this page on GitHub

PreviousMenuNextPopover