Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Menu

Menu is a component that displays a common dropdown menu.

Source@yamada-ui/menu

Import

import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  MenuGroup,
  MenuOptionItem,
  MenuOptionGroup,
  MenuSeparator,
} from "@yamada-ui/react"
Copied!
  • Menu: A wrapper component that controls the state of the menu.
  • MenuButton: A component that toggles the menu open or closed.
  • 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).
  • MenuSeparator: A component that separates items in the menu.

Usage

Editable example

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuItem>Set status</MenuItem>
    <MenuItem>Edit Profile</MenuItem>
    <MenuItem>Preferences</MenuItem>
  </MenuList>
</Menu>
Copied!

Accessing Internal State

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

Editable example

<Menu>
  {({ isOpen }) => (
    <>
      <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
        {isOpen ? "Close" : "Open"} Menu
      </MenuButton>

      <MenuList>
        <MenuItem>Set status</MenuItem>
        <MenuItem>Edit Profile</MenuItem>
        <MenuItem>Preferences</MenuItem>
      </MenuList>
    </>
  )}
</Menu>
Copied!

Displaying Commands in Items

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

Editable example

<Menu>
  <MenuButton
    as={IconButton}
    icon={<MenuIcon fontSize="2xl" />}
    variant="outline"
  />

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

Displaying Icons in Items

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

Editable example

<Menu>
  <MenuButton
    as={IconButton}
    icon={<MenuIcon fontSize="2xl" />}
    variant="outline"
  />

  <MenuList>
    <MenuItem icon={<PlusIcon fontSize="lg" />} command="⌘T">
      New Tab
    </MenuItem>
    <MenuItem icon={<ExternalLinkIcon fontSize="lg" />} command="⌘N">
      New Window
    </MenuItem>
    <MenuItem icon={<FilePenLineIcon fontSize="lg" />} command="⌘O">
      Open File
    </MenuItem>
  </MenuList>
</Menu>
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<HTMLDivElement>(null)

return (
  <Menu initialFocusRef={ref}>
    <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
      Menu
    </MenuButton>

    <MenuList>
      <MenuItem>Set status</MenuItem>
      <MenuItem ref={ref}>Edit Profile</MenuItem>
      <MenuItem>Preferences</MenuItem>
    </MenuList>
  </Menu>
)
Copied!

Changing the Display Position

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

Editable example

<Menu placement="top">
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuItem>Set status</MenuItem>
    <MenuItem>Edit Profile</MenuItem>
    <MenuItem>Preferences</MenuItem>
  </MenuList>
</Menu>
Copied!

Changing the Animation

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

Editable example

<Menu animation="top">
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuItem>Set status</MenuItem>
    <MenuItem>Edit Profile</MenuItem>
    <MenuItem>Preferences</MenuItem>
  </MenuList>
</Menu>
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">
  <Menu gutter={32}>
    <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
      Menu
    </MenuButton>

    <MenuList>
      <MenuItem>Set status</MenuItem>
      <MenuItem>Edit Profile</MenuItem>
      <MenuItem>Preferences</MenuItem>
    </MenuList>
  </Menu>

  <Menu offset={[16, 16]}>
    <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
      Menu
    </MenuButton>

    <MenuList>
      <MenuItem>Set status</MenuItem>
      <MenuItem>Edit Profile</MenuItem>
      <MenuItem>Preferences</MenuItem>
    </MenuList>
  </Menu>
</Wrap>
Copied!

Changing the Duration

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

Editable example

<Menu duration={0.4}>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuItem>Set status</MenuItem>
    <MenuItem>Edit Profile</MenuItem>
    <MenuItem>Preferences</MenuItem>
  </MenuList>
</Menu>
Copied!

Adding Dividers Between Items

By setting MenuSeparator between MenuItems, you can add dividers.

Editable example

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuItem>Set status</MenuItem>
    <MenuItem>Edit Profile</MenuItem>
    <MenuItem>Preferences</MenuItem>

    <MenuSeparator />

    <MenuItem>Sign out</MenuItem>
  </MenuList>
</Menu>
Copied!

Grouping Items

To group items together, use MenuGroup.

Editable example

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuGroup label="account">
      <MenuItem>Set status</MenuItem>
      <MenuItem>Edit Profile</MenuItem>
      <MenuItem>Preferences</MenuItem>
    </MenuGroup>

    <MenuSeparator />

    <MenuGroup label="action">
      <MenuItem>Sign out</MenuItem>
    </MenuGroup>
  </MenuList>
</Menu>
Copied!

Selectable Items

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

Editable example

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

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

    <MenuSeparator />

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

Nested Menus

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

Editable example

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <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>
    <MenuItem>Edit Profile</MenuItem>
    <MenuItem>Preferences</MenuItem>
  </MenuList>
</Menu>
Copied!

Keeping the Menu Open When an Item is Selected

If you do not want the menu to close when an item is selected, set closeOnSelect to false.

Editable example

<Menu closeOnSelect={false}>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuItem>Set status</MenuItem>
    <MenuItem closeOnSelect={true}>Edit Profile</MenuItem>
    <MenuItem>Preferences</MenuItem>
  </MenuList>
</Menu>
Copied!

Keeping the Menu Open When Focus is Lost

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

Editable example

<Menu closeOnBlur={false}>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuItem>Set status</MenuItem>
    <MenuItem>Edit Profile</MenuItem>
    <MenuItem>Preferences</MenuItem>
  </MenuList>
</Menu>
Copied!

Disabling Items

To disable items, set isDisabled to true.

Editable example

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuItem>Set status</MenuItem>
    <MenuItem isDisabled>Edit Profile</MenuItem>
    <MenuItem>Preferences</MenuItem>
  </MenuList>
</Menu>
Copied!

Allowing Focus on Disabled Items

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

Editable example

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuItem>Set status</MenuItem>
    <MenuItem isDisabled isFocusable>
      Edit Profile
    </MenuItem>
    <MenuItem>Preferences</MenuItem>
  </MenuList>
</Menu>
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

<Menu isLazy>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuItem>Set status</MenuItem>
    <MenuItem>Edit Profile</MenuItem>
    <MenuItem>Preferences</MenuItem>
  </MenuList>
</Menu>
Copied!

Controlling

Editable example

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

return (
  <Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
    <MenuButton as={Button} rightIcon={<ChevronDownIcon fontSize="xl" />}>
      Menu
    </MenuButton>

    <MenuList>
      <MenuItem>Set status</MenuItem>
      <MenuItem>Edit Profile</MenuItem>
      <MenuItem>Preferences</MenuItem>
    </MenuList>
  </Menu>
)
Copied!

Edit this page on GitHub

PreviousDrawerNextContextMenu