メニューバー

デスクトップアプリケーションで一般的に使用される、一貫したコマンドセットへの迅速なアクセスを提供する、視覚的に持続するメニュー。

import React from 'react';
import * as Menubar from '@radix-ui/react-menubar';
import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
import './styles.css';

const RADIO_ITEMS = ['Andy', 'Benoît', 'Luis'];
const CHECK_ITEMS = ['Always Show Bookmarks Bar', 'Always Show Full URLs'];

const MenubarDemo = () => {
  const [checkedSelection, setCheckedSelection] = React.useState([CHECK_ITEMS[1]]);
  const [radioSelection, setRadioSelection] = React.useState(RADIO_ITEMS[2]);

  return (
    <Menubar.Root className="MenubarRoot">
      <Menubar.Menu>
        <Menubar.Trigger className="MenubarTrigger">File</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content className="MenubarContent" align="start" sideOffset={5} alignOffset={-3}>
            <Menubar.Item className="MenubarItem">
              New Tab <div className="RightSlot">⌘ T</div>
            </Menubar.Item>
            <Menubar.Item className="MenubarItem">
              New Window <div className="RightSlot">⌘ N</div>
            </Menubar.Item>
            <Menubar.Item className="MenubarItem" disabled>
              New Incognito Window
            </Menubar.Item>
            <Menubar.Separator className="MenubarSeparator" />
            <Menubar.Sub>
              <Menubar.SubTrigger className="MenubarSubTrigger">
                Share
                <div className="RightSlot">
                  <ChevronRightIcon />
                </div>
              </Menubar.SubTrigger>
              <Menubar.Portal>
                <Menubar.SubContent className="MenubarSubContent" alignOffset={-5}>
                  <Menubar.Item className="MenubarItem">Email Link</Menubar.Item>
                  <Menubar.Item className="MenubarItem">Messages</Menubar.Item>
                  <Menubar.Item className="MenubarItem">Notes</Menubar.Item>
                </Menubar.SubContent>
              </Menubar.Portal>
            </Menubar.Sub>
            <Menubar.Separator className="MenubarSeparator" />
            <Menubar.Item className="MenubarItem">
              Print… <div className="RightSlot">⌘ P</div>
            </Menubar.Item>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>

      <Menubar.Menu>
        <Menubar.Trigger className="MenubarTrigger">Edit</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content className="MenubarContent" align="start" sideOffset={5} alignOffset={-3}>
            <Menubar.Item className="MenubarItem">
              Undo <div className="RightSlot">⌘ Z</div>
            </Menubar.Item>
            <Menubar.Item className="MenubarItem">
              Redo <div className="RightSlot">⇧ ⌘ Z</div>
            </Menubar.Item>
            <Menubar.Separator className="MenubarSeparator" />
            <Menubar.Sub>
              <Menubar.SubTrigger className="MenubarSubTrigger">
                Find
                <div className="RightSlot">
                  <ChevronRightIcon />
                </div>
              </Menubar.SubTrigger>

              <Menubar.Portal>
                <Menubar.SubContent className="MenubarSubContent" alignOffset={-5}>
                  <Menubar.Item className="MenubarItem">Search the web…</Menubar.Item>
                  <Menubar.Separator className="MenubarSeparator" />
                  <Menubar.Item className="MenubarItem">Find…</Menubar.Item>
                  <Menubar.Item className="MenubarItem">Find Next</Menubar.Item>
                  <Menubar.Item className="MenubarItem">Find Previous</Menubar.Item>
                </Menubar.SubContent>
              </Menubar.Portal>
            </Menubar.Sub>
            <Menubar.Separator className="MenubarSeparator" />
            <Menubar.Item className="MenubarItem">Cut</Menubar.Item>
            <Menubar.Item className="MenubarItem">Copy</Menubar.Item>
            <Menubar.Item className="MenubarItem">Paste</Menubar.Item>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>

      <Menubar.Menu>
        <Menubar.Trigger className="MenubarTrigger">View</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content
            className="MenubarContent"
            align="start"
            sideOffset={5}
            alignOffset={-14}
          >
            {CHECK_ITEMS.map((item) => (
              <Menubar.CheckboxItem
                className="MenubarCheckboxItem inset"
                key={item}
                checked={checkedSelection.includes(item)}
                onCheckedChange={() =>
                  setCheckedSelection((current) =>
                    current.includes(item)
                      ? current.filter((el) => el !== item)
                      : current.concat(item)
                  )
                }
              >
                <Menubar.ItemIndicator className="MenubarItemIndicator">
                  <CheckIcon />
                </Menubar.ItemIndicator>
                {item}
              </Menubar.CheckboxItem>
            ))}
            <Menubar.Separator className="MenubarSeparator" />
            <Menubar.Item className="MenubarItem inset">
              Reload <div className="RightSlot">⌘ R</div>
            </Menubar.Item>
            <Menubar.Item className="MenubarItem inset" disabled>
              Force Reload <div className="RightSlot">⇧ ⌘ R</div>
            </Menubar.Item>
            <Menubar.Separator className="MenubarSeparator" />
            <Menubar.Item className="MenubarItem inset">Toggle Fullscreen</Menubar.Item>
            <Menubar.Separator className="MenubarSeparator" />
            <Menubar.Item className="MenubarItem inset">Hide Sidebar</Menubar.Item>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>

      <Menubar.Menu>
        <Menubar.Trigger className="MenubarTrigger">Profiles</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content
            className="MenubarContent"
            align="start"
            sideOffset={5}
            alignOffset={-14}
          >
            <Menubar.RadioGroup value={radioSelection} onValueChange={setRadioSelection}>
              {RADIO_ITEMS.map((item) => (
                <Menubar.RadioItem className="MenubarRadioItem inset" key={item} value={item}>
                  <Menubar.ItemIndicator className="MenubarItemIndicator">
                    <DotFilledIcon />
                  </Menubar.ItemIndicator>
                  {item}
                </Menubar.RadioItem>
              ))}
              <Menubar.Separator className="MenubarSeparator" />
              <Menubar.Item className="MenubarItem inset">Edit…</Menubar.Item>
              <Menubar.Separator className="MenubarSeparator" />
              <Menubar.Item className="MenubarItem inset">Add Profile…</Menubar.Item>
            </Menubar.RadioGroup>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
    </Menubar.Root>
  );
};

export default MenubarDemo;

機能

制御可能または非制御可能です。

設定可能な読み取り方向を持つサブメニューをサポートします。

アイテム、ラベル、アイテムのグループをサポートします。

チェック可能なアイテム（シングルまたは複数）をサポートします。

サイド、配置、オフセット、衝突処理をカスタマイズできます。

オプションで指し示す矢印を表示できます。

フォーカスは完全に管理されています。

完全なキーボードナビゲーション。

タイプヘッドサポート。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-menubar

構成要素

すべての部品をインポートして組み立てる。

import * as Menubar from '@radix-ui/react-menubar';

export default () => (
  <Menubar.Root>
    <Menubar.Menu>
      <Menubar.Trigger />
      <Menubar.Portal>
        <Menubar.Content>
          <Menubar.Label />
          <Menubar.Item />

          <Menubar.Group>
            <Menubar.Item />
          </Menubar.Group>

          <Menubar.CheckboxItem>
            <Menubar.ItemIndicator />
          </Menubar.CheckboxItem>

          <Menubar.RadioGroup>
            <Menubar.RadioItem>
              <Menubar.ItemIndicator />
            </Menubar.RadioItem>
          </Menubar.RadioGroup>

          <Menubar.Sub>
            <Menubar.SubTrigger />
            <Menubar.Portal>
              <Menubar.SubContent />
            </Menubar.Portal>
          </Menubar.Sub>

          <Menubar.Separator />
          <Menubar.Arrow />
        </Menubar.Content>
      </Menubar.Portal>
    </Menubar.Menu>
  </Menubar.Root>
);

APIリファレンス

ルート

メニューバーのすべての部品を含みます。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`
`defaultValue`	`文字列`	デフォルト値なし
`value`	`文字列`	デフォルト値なし
`onValueChange`	`関数`	デフォルト値なし
`dir`	`列挙型`	デフォルト値なし
`loop`	`ブール値`	`false`

トップレベルのメニューアイテム。トリガーとコンテンツの組み合わせを含みます。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`
`value`	`文字列`	デフォルト値なし

トリガー

コンテンツを切り替えるボタン。デフォルトでは、Menubar.Contentはトリガーに対して配置されます。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-highlighted]`	ハイライト表示されている場合に存在します。
`[data-disabled]`	無効になっている場合に存在します。

ポータル

使用する場合、コンテンツ部分をbodyにポータルします。

プロップ	型	デフォルト
`forceMount`	`ブール値`	デフォルト値なし
`container`	`HTMLElement`	`document.body`

コンテンツ

メニューが開いているときに表示されるコンポーネント。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`
`loop`	`ブール値`	`false`
`onCloseAutoFocus`	`関数`	デフォルト値なし
`onEscapeKeyDown`	`関数`	デフォルト値なし
`onPointerDownOutside`	`関数`	デフォルト値なし
`onFocusOutside`	`関数`	デフォルト値なし
`onInteractOutside`	`関数`	デフォルト値なし
`forceMount`	`ブール値`	デフォルト値なし
`配置位置`	`列挙型`	`「下部」`
`配置オフセット`	`数値`	`0`
`位置合わせ`	`列挙型`	`「中央」`
`位置合わせオフセット`	`数値`	`0`
`衝突回避`	`ブール値`	`true`
`衝突境界`	`境界`	`[]`
`衝突パディング`	`数値｜パディング`	`0`
`矢印パディング`	`数値`	`0`
`固定`	`列挙型`	`「部分的」`
`非接続時の非表示`	`ブール値`	`false`

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-side]`	`「左」｜「右」｜「下」｜「上」`
`[data-align]`	`「開始」｜「終了」｜「中央」`

CSS変数	説明
`--radix-menubar-content-transform-origin`	コンテンツと矢印の位置/オフセットから計算された`transform-origin`
`--radix-menubar-content-available-width`	トリガーと境界のエッジ間の残りの幅
`--radix-menubar-content-available-height`	トリガーと境界のエッジ間の残りの高さ
`--radix-menubar-trigger-width`	トリガーの幅
`--radix-menubar-trigger-height`	トリガーの高さ

矢印

メニューバーメニューとともに表示するためのオプションの矢印要素。これは、トリガーとMenubar.Contentを視覚的にリンクするのに役立ちます。Menubar.Content内にレンダリングする必要があります。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`
`幅`	`数値`	`10`
`高さ`	`数値`	`5`

項目

メニューバー項目を含むコンポーネント。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`
`無効`	`ブール値`	デフォルト値なし
`onSelect`	`関数`	デフォルト値なし
`textValue`	`文字列`	デフォルト値なし

データ属性	値
`[data-highlighted]`	ハイライト表示されている場合に存在します。
`[data-disabled]`	無効になっている場合に存在します。

グループ

複数のMenubar.Itemをグループ化するために使用されます。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`

ラベル

ラベルをレンダリングするために使用されます。矢印キーを使用してフォーカスすることはできません。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`

CheckboxItem

チェックボックスのように制御およびレンダリングできる項目。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`
`チェック済み`	`ブール値｜'不定'`	デフォルト値なし
`onCheckedChange`	`関数`	デフォルト値なし
`無効`	`ブール値`	デフォルト値なし
`onSelect`	`関数`	デフォルト値なし
`textValue`	`文字列`	デフォルト値なし

データ属性	値
`[data-state]`	`「チェック済み」｜「チェック解除済み」`
`[data-highlighted]`	ハイライト表示されている場合に存在します。
`[data-disabled]`	無効になっている場合に存在します。

RadioGroup

複数のMenubar.RadioItemをグループ化するために使用されます。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`
`value`	`文字列`	デフォルト値なし
`onValueChange`	`関数`	デフォルト値なし

RadioItem

ラジオのように制御およびレンダリングできる項目。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`
`value*`	`文字列`	デフォルト値なし
`無効`	`ブール値`	デフォルト値なし
`onSelect`	`関数`	デフォルト値なし
`textValue`	`文字列`	デフォルト値なし

データ属性	値
`[data-state]`	`「チェック済み」｜「チェック解除済み」`
`[data-highlighted]`	ハイライト表示されている場合に存在します。
`[data-disabled]`	無効になっている場合に存在します。

ItemIndicator

親のMenubar.CheckboxItemまたはMenubar.RadioItemがチェックされている場合にレンダリングされます。この要素を直接スタイル設定したり、アイコンを入れるためのラッパーとして使用したり、その両方を使用したりできます。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`
`forceMount`	`ブール値`	デフォルト値なし

データ属性	値
`[data-state]`	`「チェック済み」｜「チェック解除済み」`

セパレーター

メニューバーメニューの項目を視覚的に区切るために使用されます。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`

サブメニュー

サブメニューのすべての部分を包含します。

プロップ	型	デフォルト
`デフォルトで開く`	`ブール値`	デフォルト値なし
`開く`	`ブール値`	デフォルト値なし
`onOpenChange`	`関数`	デフォルト値なし

SubTrigger

サブメニューを開く項目。Menubar.Sub内にレンダリングする必要があります。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`
`無効`	`ブール値`	デフォルト値なし
`textValue`	`文字列`	デフォルト値なし

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-highlighted]`	ハイライト表示されている場合に存在します。
`[data-disabled]`	無効になっている場合に存在します。

SubContent

サブメニューが開いているときに表示されるコンポーネント。Menubar.Sub内にレンダリングする必要があります。

プロップ	型	デフォルト
`asChild`	`ブール値`	`false`
`loop`	`ブール値`	`false`
`onEscapeKeyDown`	`関数`	デフォルト値なし
`onPointerDownOutside`	`関数`	デフォルト値なし
`onFocusOutside`	`関数`	デフォルト値なし
`onInteractOutside`	`関数`	デフォルト値なし
`forceMount`	`ブール値`	デフォルト値なし
`配置オフセット`	`数値`	`0`
`位置合わせオフセット`	`数値`	`0`
`衝突回避`	`ブール値`	`true`
`衝突境界`	`境界`	`[]`
`衝突パディング`	`数値｜パディング`	`0`
`矢印パディング`	`数値`	`0`
`固定`	`列挙型`	`「部分的」`
`非接続時の非表示`	`ブール値`	`false`

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-side]`	`「左」｜「右」｜「下」｜「上」`
`[data-align]`	`「開始」｜「終了」｜「中央」`
`[data-orientation]`	`「垂直」｜「水平」`

CSS変数	説明
`--radix-menubar-content-transform-origin`	コンテンツと矢印の位置/オフセットから計算された`transform-origin`
`--radix-menubar-content-available-width`	トリガーと境界のエッジ間の残りの幅
`--radix-menubar-content-available-height`	トリガーと境界のエッジ間の残りの高さ
`--radix-menubar-trigger-width`	トリガーの幅
`--radix-menubar-trigger-height`	トリガーの高さ

例

サブメニュー付き

Menubar.Subとそのパーツを組み合わせてサブメニューを作成できます。

<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger>…</Menubar.Trigger>
    <Menubar.Portal>
      <Menubar.Content>
        <Menubar.Item>…</Menubar.Item>
        <Menubar.Item>…</Menubar.Item>
        <Menubar.Separator />
        <Menubar.Sub>
          <Menubar.SubTrigger>Sub menu →</Menubar.SubTrigger>
          <Menubar.Portal>
            <Menubar.SubContent>
              <Menubar.Item>Sub menu item</Menubar.Item>
              <Menubar.Item>Sub menu item</Menubar.Item>
              <Menubar.Arrow />
            </Menubar.SubContent>
          </Menubar.Portal>
        </Menubar.Sub>
        <Menubar.Separator />
        <Menubar.Item>…</Menubar.Item>
      </Menubar.Content>
    </Menubar.Portal>
  </Menubar.Menu>
</Menubar.Root>

無効な項目付き

data-disabled属性を使用して、無効な項目に特別なスタイルを追加できます。

// index.jsx
import * as Menubar from '@radix-ui/react-menubar';
import './styles.css';

export default () => (
  <Menubar.Root>
    <Menubar.Menu>
      <Menubar.Trigger>…</Menubar.Trigger>
      <Menubar.Portal>
        <Menubar.Content>
          <Menubar.Item className="MenubarItem" disabled>
            …
          </Menubar.Item>
          <Menubar.Item className="MenubarItem">…</Menubar.Item>
        </Menubar.Content>
      </Menubar.Portal>
    </Menubar.Menu>
  </Menubar.Root>
);

/* styles.css */
.MenubarItem[data-disabled] {
  color: gainsboro;
}

セパレーター付き

Separatorパーツを使用して、項目間にセパレーターを追加します。

<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger>…</Menubar.Trigger>
    <Menubar.Portal>
      <Menubar.Content>
        <Menubar.Item>…</Menubar.Item>
        <Menubar.Separator />
        <Menubar.Item>…</Menubar.Item>
        <Menubar.Separator />
        <Menubar.Item>…</Menubar.Item>
      </Menubar.Content>
    </Menubar.Portal>
  </Menubar.Menu>
</Menubar.Root>

ラベル付き

Labelパーツを使用して、セクションにラベルを付けます。

<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger>…</Menubar.Trigger>
    <Menubar.Portal>
      <Menubar.Content>
        <Menubar.Label>Label</Menubar.Label>
        <Menubar.Item>…</Menubar.Item>
        <Menubar.Item>…</Menubar.Item>
        <Menubar.Item>…</Menubar.Item>
      </Menubar.Content>
    </Menubar.Portal>
  </Menubar.Menu>
</Menubar.Root>

チェックボックス項目付き

CheckboxItemパーツを使用して、チェックできる項目を追加します。

import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as Menubar from '@radix-ui/react-menubar';

export default () => {
  const [checked, setChecked] = React.useState(true);

  return (
    <Menubar.Root>
      <Menubar.Menu>
        <Menubar.Trigger>…</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content>
            <Menubar.Item>…</Menubar.Item>
            <Menubar.Item>…</Menubar.Item>
            <Menubar.Separator />
            <Menubar.CheckboxItem
              checked={checked}
              onCheckedChange={setChecked}
            >
              <Menubar.ItemIndicator>
                <CheckIcon />
              </Menubar.ItemIndicator>
              Checkbox item
            </Menubar.CheckboxItem>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
    </Menubar.Root>
  );
};

ラジオボタン項目付き

RadioGroupとRadioItemパーツを使用して、他の項目の中からチェックできる項目を追加します。

import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as Menubar from '@radix-ui/react-menubar';

export default () => {
  const [color, setColor] = React.useState('blue');

  return (
    <Menubar.Root>
      <Menubar.Menu>
        <Menubar.Trigger>…</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content>
            <Menubar.RadioGroup value={color} onValueChange={setColor}>
              <Menubar.RadioItem value="red">
                <Menubar.ItemIndicator>
                  <CheckIcon />
                </Menubar.ItemIndicator>
                Red
              </Menubar.RadioItem>
              <Menubar.RadioItem value="blue">
                <Menubar.ItemIndicator>
                  <CheckIcon />
                </Menubar.ItemIndicator>
                Blue
              </Menubar.RadioItem>
            </Menubar.RadioGroup>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
    </Menubar.Root>
  );
};

複雑な項目付き

Itemパーツに画像などの追加の装飾要素を追加できます。

import * as Menubar from '@radix-ui/react-menubar';

export default () => (
  <Menubar.Root>
    <Menubar.Menu>
      <Menubar.Trigger>…</Menubar.Trigger>
      <Menubar.Portal>
        <Menubar.Content>
          <Menubar.Item>
            <img src="…" />
            Adolfo Hess
          </Menubar.Item>
          <Menubar.Item>
            <img src="…" />
            Miyah Myles
          </Menubar.Item>
        </Menubar.Content>
      </Menubar.Portal>
    </Menubar.Menu>
  </Menubar.Root>
);

コンテンツ/サブコンテンツのサイズを制限する

コンテンツ（またはサブコンテンツ）の幅をトリガー（またはサブトリガー）の幅に合わせるように制限したい場合があります。また、ビューポートを超えないように高さを制限することもできます。

これをサポートするために、--radix-menubar-trigger-widthや--radix-menubar-content-available-heightなどのいくつかのCSSカスタムプロパティを公開しています。これらを使用して、コンテンツの寸法を制限します。

// index.jsx
import * as Menubar from '@radix-ui/react-menubar';
import './styles.css';

export default () => (
  <Menubar.Root>
    <Menubar.Trigger>…</Menubar.Trigger>
    <Menubar.Portal>
      <Menubar.Content className="MenubarContent" sideOffset={5}>
        …
      </Menubar.Content>
    </Menubar.Portal>
  </Menubar.Root>
);

/* styles.css */
.MenubarContent {
  width: var(--radix-menubar-trigger-width);
  max-height: var(--radix-menubar-content-available-height);
}

起点対応アニメーション

CSSカスタムプロパティ--radix-menubar-content-transform-originを公開しています。side、sideOffset、align、alignOffset、および衝突に基づいて計算された起点からコンテンツをアニメーション化するために使用します。

// index.jsx
import * as Menubar from '@radix-ui/react-menubar';
import './styles.css';

export default () => (
  <Menubar.Root>
    <Menubar.Menu>
      <Menubar.Trigger>…</Menubar.Trigger>
      <Menubar.Portal>
        <Menubar.Content className="MenubarContent">…</Menubar.Content>
      </Menubar.Portal>
    </Menubar.Menu>
  </Menubar.Root>
);

/* styles.css */
.MenubarContent {
  transform-origin: var(--radix-menubar-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

衝突対応アニメーション

data-side属性とdata-align属性を公開しています。これらの値は、ランタイム時に変更され、衝突を反映します。これらを使用して、衝突と方向を考慮したアニメーションを作成します。

// index.jsx
import * as Menubar from '@radix-ui/react-menubar';
import './styles.css';

export default () => (
  <Menubar.Root>
    <Menubar.Menu>
      <Menubar.Trigger>…</Menubar.Trigger>
      <Menubar.Portal>
        <Menubar.Content className="MenubarContent">…</Menubar.Content>
      </Menubar.Portal>
    </Menubar.Menu>
  </Menubar.Root>
);

/* styles.css */
.MenubarContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.MenubarContent[data-side='top'] {
  animation-name: slideUp;
}
.MenubarContent[data-side='bottom'] {
  animation-name: slideDown;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

アクセシビリティ

メニューボタンWAI-ARIAデザインパターンに準拠し、ロービングtabIndexを使用して、メニュー項目間のフォーカス移動を管理します。

キーボード操作

キー	説明
`スペース`	`Menubar.Trigger`にフォーカスがある場合、メニューバーを開き、最初の項目にフォーカスします。項目にフォーカスがある場合、フォーカスされている項目をアクティブにします。
`Enter`	`Menubar.Trigger`にフォーカスがある場合、関連付けられたメニューを開きます。項目にフォーカスがある場合、フォーカスされている項目をアクティブにします。
`下矢印`	`Menubar.Trigger`にフォーカスがある場合、関連付けられたメニューを開きます。項目にフォーカスがある場合、フォーカスを次の項目に移動します。
`上矢印`	項目にフォーカスがある場合、フォーカスを前の項目に移動します。
`右矢印左矢印`	`Menubar.Trigger`にフォーカスがある場合、フォーカスを次の項目または前の項目に移動します。 `Menubar.SubTrigger`にフォーカスがある場合、読み取り方向に応じてサブメニューを開いたり閉じたりします。 `Menubar.Content`内にフォーカスがある場合、メニューバーの次のメニューを開きます。
`Esc`	現在開いているメニューを閉じ、フォーカスをその `Menubar.Trigger`.

前へラベル

次へナビゲーションメニュー

GitHubでこのページを編集します。

概要

ガイド

コンポーネント

ユーティリティ

機能