ナビゲーションメニュー

hc-navmenu は、項目がコンテンツパネル(メガメニュー)を開けるトップレベルのサイトナビゲーションです。ディスクロージャの集合です: 各トリガーは button[aria-expanded] で、CSS Anchor Positioning によってその下にアンカーされた popover パネルを制御します。パネルはホバー / フォーカスで開き、同時に 1 つだけ、中のリンクは本物の <a> のままです — そのため素の MPA ナビゲーションでも htmx でも機能します。

別名: ナビバー、ナビゲーションメニュー、メガメニュー。

ブラウザのベースライン

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

Anchor Positioning のない環境では installNavmenu() が JS 配置にフォールバックします — popover がサポートされる環境ならどこでも、パネルは正しく開いて解散します。

基本の HTML

<nav class="hc-navmenu" aria-label="Main">
  <ul class="hc-navmenu__list">
    <li class="hc-navmenu__item">
      <button class="hc-navmenu__trigger" type="button"
              data-hc-navmenu-trigger aria-controls="nm-products">Products</button>
      <div class="hc-navmenu__panel" id="nm-products">
        <a class="hc-navmenu__link" href="/analytics">Analytics</a>
        <a class="hc-navmenu__link" href="/billing">Billing</a>
      </div>
    </li>
    <!-- A plain top-level link needs no trigger / panel. -->
    <li class="hc-navmenu__item">
      <a class="hc-navmenu__link" href="/pricing">Pricing</a>
    </li>
  </ul>
</nav>

import { installNavmenu } from '@hypermedia-components/core';
installNavmenu();

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

トリガーには aria-haspopup / aria-expanded / aria-controls が自動で配線され、パネルはその下にアンカーされた popover になります。

挙動

ホバー / フォーカスは、短い意図確認の遅延の後にパネルを開き、短い猶予の後に閉じます(ポインタをトリガーからパネルへ動かしても解散しないように)。開くパネルは同時に 1 つだけです。
キーボード: ↓ / ↑ はパネルを開いて中の最初 / 最後の項目へフォーカスを移動。Esc は閉じてフォーカスをトリガーへ返します。 Tab はトリガーとパネルのリンクを普通に辿ります。
リンクはリンクのまま。 ビヘイビアがパネル内の <a> のクリックをインターセプトすることは決してありません — ナビゲーションはブラウザ(リンクが data-hx-* を運んでいれば htmx)のものです。

レスポンシブ(モバイル)

狭い画面では水平のメガメニューは収まりません。パネルは素のマークアップなので、同じコンテンツがうまくデグレードします: バーをトグルの背後に畳み(例: hc-drawer の中)、各セクションを積み重ねた hc-collapsibleとして描画します。レイアウトの切り替えはメディアクエリで — リンクと構造は同一なので、重複するマークアップは不要です。

アクセシビリティ

メニューは aria-label つきの <nav> で包みます。各パネルトリガーは aria-expanded と aria-controls を公開する本物の <button> です。
パネルは popover なので、Esc と外側クリックの解散はプラットフォームから来ます。Esc でフォーカスはトリガーへ戻ります。
パネルのコンテンツは、Tab で到達可能で普通に読み上げられるよう、ソース順の本物のリンク / ボタンに保ってください。

テーマ用トークン

トークンパス	用途
`navmenu.gap`	トップ項目間のギャップ。
`navmenu.trigger-padding-x` / `-y`	トリガー / トップリンクのパディング。
`navmenu.trigger-radius`	トリガー / トップリンクの角丸。
`navmenu.trigger-fg`	トリガーのテキスト色。
`navmenu.trigger-hover-bg`	トリガーのホバー / 展開時の背景。
`navmenu.panel-bg` / `-fg` / `-border`	パネルの面。
`navmenu.panel-radius` / `-padding` / `-min-width`	パネルのボックス。
`navmenu.panel-offset`	トリガーとパネルの間のギャップ。
`navmenu.link-padding-x` / `-y` / `-radius`	パネルリンクのボックス。
`navmenu.link-fg` / `-hover-bg`	パネルリンクの色。

CSS 変数

生成される CSS 変数を表示

--hc-navmenu-gap | -trigger-padding-x | -trigger-padding-y | -trigger-radius
--hc-navmenu-trigger-fg | -trigger-hover-bg
--hc-navmenu-panel-bg | -panel-fg | -panel-border | -panel-radius | -panel-padding | -panel-min-width | -panel-offset
--hc-navmenu-link-padding-x | -link-padding-y | -link-radius | -link-fg | -link-hover-bg