メニューバーMenubarExperimental

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

プレビュー

状態とバリエーション

ウィンドウヘッダー下

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

キャンバス編集

作業領域

チェックと選択肢

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

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
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>
  )
}

使用コンポーネント

Menubar

関連コンポーネント

ContextMenu

設計の判断（UIXHERO）

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

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