メニューバー

hc-menubar はデスクトップアプリケーションのメニューバー パターンです: メニューボタン(File / Edit / View …)の水平の列で、 それぞれが hc-menu の ドロップダウンを開きます。既存のメニュー機構の上の薄い層です — installMenu() がドロップダウンの内部(ARIA、メニュー内キーボード、 サブメニュー)を所有し、installMenubar() がバーのナビゲーションを 足します。

別名: アプリケーションメニュー。

ブラウザのベースライン

プリミティブ	必要バージョン
HTML popover	Chrome 114、Edge 114、Firefox 125、Safari 17
CSS Anchor Positioning	Chrome 125、Edge 125、Firefox 147、Safari 26

ドロップダウンは普通の hc-menu ポップオーバーなので、Anchor Positioning がない場合は installMenu() が getBoundingClientRect による配置にフォールバックします — popover がサポートされる環境なら どこでも、メニューは正しく開き、閉じ、振る舞います。

基本の HTML

PreviewCode

File

NewOpen…

---

Save

Edit

UndoRedo

View

Zoom inZoom out

<div class="hc-menubar" role="menubar" aria-label="Application">
  <button class="hc-menubar__item" role="menuitem" type="button"
          popovertarget="mb-file" id="mb-file-t">File</button>
  <div class="hc-menu" id="mb-file" popover role="menu" aria-labelledby="mb-file-t">
    <button class="hc-menu__item" role="menuitem" type="button">New</button>
    <button class="hc-menu__item" role="menuitem" type="button">Open…</button>
    <hr class="hc-menu__separator">
    <button class="hc-menu__item" role="menuitem" type="button">Save</button>
  </div>

  <button class="hc-menubar__item" role="menuitem" type="button"
          popovertarget="mb-edit" id="mb-edit-t">Edit</button>
  <div class="hc-menu" id="mb-edit" popover role="menu" aria-labelledby="mb-edit-t">
    <button class="hc-menu__item" role="menuitem" type="button">Undo</button>
    <button class="hc-menu__item" role="menuitem" type="button">Redo</button>
  </div>

  <!-- … View のペアも同じ「ボタン + メニュー」の形で続きます … -->
</div>

import { installMenu, installMenubar } from '@hypermedia-components/core';
installMenu();     // dropdown internals
installMenubar();  // the bar navigation

installMenubar() は冪等で、アンインストーラを返します (installMenu() も同様です)。ゼロ設定の @hypermedia-components/core/behaviors エントリが両方を自動インストールし、 htmx でスワップされた内容も自動で拾います。

各トップボタンは、popovertarget で自身のドロップダウンを指す role="menuitem" です。ドロップダウンは普通の hc-menu ポップオーバー です(そのためサブメニュー、チェックボックス / ラジオ項目、 hc:menuselect イベントが無料で付いてきます)。

キーボード

キー	動作
← / →	トップ項目間を移動(RTL でミラー)。両端でラップ。
Home / End	最初 / 最後のトップ項目。
↓ / Enter / Space	フォーカス中のメニューを開く(↓ は最初の項目にフォーカス)。
↑	フォーカス中のメニューを最後の項目で開く。
← / →(メニュー展開中)	隣のメニューへ切り替えて開く。
Esc	メニューを閉じ、フォーカスをトップ項目へ返す。

サブメニューの親は引き続き → でサブメニューを開きます(メニューバーは サブメニュー機構に譲ります)。入れ子のメニューも機能し続けます。

アクセシビリティ

• バーは aria-label つきの role="menubar" です。各トップボタンは role="menuitem" で、installMenu() が aria-haspopup="menu" / aria-expanded を配線します。
• バーは単一の Tab ストップ(ロービングタブインデックス)です。 矢印キーがその中を移動し、WAI-ARIA APG のメニューバーパターンに 一致します。
• 各ドロップダウンにラベルを付けてください(ボタンを指す aria-labelledby、または aria-label)。開いたメニューが アクセシブルな名前を持つようにするためです。

テーマ用トークン

トークンパス	用途
menubar.gap	トップ項目間のギャップ。
menubar.padding-x / -y	バーのパディング。
menubar.bg	バーの背景。
menubar.border	バーの枠線。
menubar.radius	バーの角丸。
menubar.item-padding-x / -y	トップ項目のパディング。
menubar.item-radius	トップ項目の角丸。
menubar.item-fg	トップ項目のテキスト色。
menubar.item-hover-bg	トップ項目のホバー / 展開時の背景。

CSS 変数

生成される CSS 変数を表示

--hc-menubar-gap | -padding-x | -padding-y | -bg | -border | -radius
--hc-menubar-item-padding-x | -item-padding-y | -item-radius | -item-fg | -item-hover-bg

関連

• メニュー — 各トップ項目が 開くドロップダウン(とサブメニューパターン)。
• ツールバー — (メニューではなく)コントロールのロービングタブインデックスの列。