Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.8

Menu

Menuは、一般的なドロップダウンメニューを表示するコンポーネントです。

ソース@yamada-ui/menu

インポート

import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  MenuGroup,
  MenuOptionItem,
  MenuOptionGroup,
  MenuSeparator,
} from "@yamada-ui/react"
Copied!
  • Menu: メニューの状態を制御するラッパーコンポーネントです。
  • MenuButton: メニューを開閉するコンポーネントです。
  • MenuList: メニューの項目を制御するラッパーコンポーネントです。
  • MenuItem: メニューの項目のコンポーネントです。
  • MenuGroup: メニューの項目をグループ化するラッパーコンポーネントです。
  • MenuOptionItem: 選択(ラジオとチェックボックス)可能なメニューの項目のコンポーネントです。
  • MenuOptionGroup:　選択(ラジオとチェックボックス)可能なメニューの項目をグループ化するラッパーコンポーネントです。
  • MenuSeparator: メニューの項目を区切るコンポーネントです。

使い方

編集可能な例

<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!

内部状態へアクセスする

childrenには、openやonCloseなどのメソッドが提供されます。これを利用して、内部状態にアクセスすることができます。

編集可能な例

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

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

項目にコマンドを表示する

項目にコマンドを表示する場合は、commandに文字列を設定します。

編集可能な例

<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!

項目にアイコンを表示する

項目にアイコンを表示する場合は、iconにReactElementを設定します。

編集可能な例

<Menu>
  <MenuButton as={IconButton} icon={<MenuIcon />} 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!

項目にフォーカスする

メニューを開く際に、特定の項目にフォーカスする場合は、initialFocusRefに対象のrefを設定します。

編集可能な例

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!

表示位置を変更する

表示位置を変更するには、placementにtopやleft-startなどを設定します。デフォルトでは、bottom-startが設定されています。

編集可能な例

<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!

アニメーションを変更する

表示または非表示のアニメーションを変更するには、animationにtopやleftなどを設定します。デフォルトでは、scaleが設定されています。

編集可能な例

<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!

オフセットを変更する

要素の大きさやシチュエーションによっては、メニューの位置を変更したい場合があります。その場合は、gutterまたはoffsetで位置を調整します。

gutterは、単純な要素との差を設定でき、offsetは、[横軸, 縦軸]を設定できます。

編集可能な例

<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!

所要時間を変更する

所要時間を変更する場合は、durationに数値(秒)を設定します。

編集可能な例

<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!

項目間に区切り線を追加する

MenuItemの間にMenuSeparatorを設定することで、区切り線を追加できます。

編集可能な例

<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!

項目をグループ化する

項目同士をグループ化する場合は、MenuGroupを使用します。

編集可能な例

<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!

選択可能な項目

MenuOptionGroupとMenuOptionItemを使用することで、ラジオやチェックボックスのような選択可能な項目を設定することができます。

編集可能な例

<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!

ネストしたメニュー

ネストしたメニューを構成するには、MenuItem内にネストさせるMenuを挿入します。

編集可能な例

<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!

項目選択時にメニューを閉じない

項目選択時にメニューを閉じたくない場合は、closeOnSelectをfalseに設定します。

編集可能な例

<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!

フォーカスが外れた場合にメニューを閉じない

フォーカスが外れた場合にメニューを閉じたくない場合は、closeOnSelectをfalseに設定します。

編集可能な例

<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!

項目を無効にする

項目を無効にする場合は、disabledをtrueに設定します。

編集可能な例

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

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

無効な項目のフォーカスを許可する

無効な項目のフォーカスを許可する場合は、focusableをtrueに設定します。

編集可能な例

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

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

遅延レンダリング

デフォルトでは、アクティブに関わらずDOMにレンダリングされます。つまり、非表示もレンダリングされているが、スタイルによって非表示になっていることになります。

アクティブになるまで、レンダリングを遅延させたい場合は、lazyをtrueに設定します。

編集可能な例

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

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

制御する

編集可能な例

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

return (
  <Menu open={open} 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!

GitHubでこのページを編集する

前Drawer次ContextMenu