メニューバーMenubarExperimental

デスクトップアプリでよくある常時表示のメニューバーです。

プレビュー

状態とバリエーション

ウィンドウヘッダー下

エディタや管理画面のタイトルバー直下に置き、現在の作業対象に対する操作をまとめます。

キャンバス編集

作業領域

チェックと選択肢

表示設定やモード切替のように、現在値をメニュー内で示す場合に使います。

いま押せない操作

薄くするだけでは「なぜ押せないのか」が画面に残りません。disabledReason を渡すと理由が吹き出しで読め、キーボードでも辿れます。理由が言えないときだけ disabled のままにします。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
MenubarRoot-横並びのメニュー群をまとめるルート。
MenubarTriggerbutton-各メニューを開くトリガー。
MenubarContentmenu-項目、区切り線、サブメニューを含むポップアップ領域。
MenubarItem.disabledboolean-利用できない項目を表示だけ残します。
MenubarItem.disabledReasonReact.ReactNode-無効な項目に hover / focus / touch で表示する理由です。
MenubarItem.disabledReasonLabelstring-無効理由を読むためのフォーカス対象に付ける支援技術向けラベル。

使い方

import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "@gunjo/ui"

export function FileMenubar() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>ファイル</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>新しいタブ <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
          <MenubarItem>新しいウィンドウ <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
          <MenubarItem>書き出し設定を開く</MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>共有</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>リンクをコピー</MenubarItem>
              <MenubarItem>メールで送信</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>編集</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>取り消し <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
          <MenubarItem>やり直し <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
          <MenubarSeparator />
          <MenubarItem>切り取り <MenubarShortcut>⌘X</MenubarShortcut></MenubarItem>
          <MenubarItem>コピー <MenubarShortcut>⌘C</MenubarShortcut></MenubarItem>
          <MenubarItem>貼り付け <MenubarShortcut>⌘V</MenubarShortcut></MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>検索</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>このページを検索 <MenubarShortcut>⌘F</MenubarShortcut></MenubarItem>
              <MenubarItem>次を検索 <MenubarShortcut>⌘G</MenubarShortcut></MenubarItem>
              <MenubarItem>前を検索 <MenubarShortcut>⇧⌘G</MenubarShortcut></MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>表示</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>再読み込み <MenubarShortcut>⌘R</MenubarShortcut></MenubarItem>
          <MenubarItem>全画面表示</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

設計の判断

  • ショートカットは置き場所だけ用意した。資料は「メニュー項目の右端にショートカットを必ず表示する」を挙げています。GUNJO は MenubarShortcut という薄い部品を用意し、ml-auto で右端に寄せて小さな字で出すところまでを持ちます。何のキーを書くかは持ちません。同じ操作でも OS で表記が変わるからです。
  • 使えない項目は消さずに、理由を出せるようにした。MenubarItem に disabledReason を渡すと、その項目は並びに残したまま、hover と focus と指での長押しで理由が出ます。disabled だけを渡すと「なぜ押せないのか」が画面のどこにも無い状態になるので、理由を書く口を部品の側に用意しました。読み上げ向けの名前は disabledReasonLabel で別に渡せます。
  • チェック項目とラジオ項目を別の部品に分けた。MenubarCheckboxItem と MenubarRadioItem を用意し、資料が求める menuitemcheckbox と menuitemradio と aria-checked は土台の Radix が付けます。サブメニュー（MenubarSub）の見た目は min-w-[8rem] と控えめにしてあり、資料の「サブメニューは最大1段まで」に沿って、深く入れ子にする使い方は想定していません。

使用コンポーネント

Menubar

関連コンポーネント

ContextMenu

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Menubarキーボード操作 (Keyboard Navigation)系列位置効果 (Serial Position Effect)