Skip to content
fandhe-frontend
GitHub

Navigation Menu

トリガーのクリックで開くナビゲーションパネル(高々 1 項目のみ開く)です。fandhe-frontend-headless-uinavigation_menu mod が構造・アクセシビリティ(WAI-ARIA・キーボード操作)・表示状態(data-*)のみを提供する unstyled 部品であり、Themes 版と異なりスタイル(CSS)は一切持ちません。nav_list(ディスクロージャなしの静的リンク集)とは、開閉状態機械の有無で使い分けます。

スタイル済みの表示例は Navigation Menu を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Features

  • トリガー起点で開閉するナビゲーションパネル。Root / List / Item / Trigger / Content / Link の 6 anatomy パーツを持つ(navigation_menu.rs モジュール doc)。
  • 高々 1 個の Trigger だけが開く状態機械(SingleSelect を埋め込んだ NavigationMenu、dispatch は "select"/"toggle"/"deselect")。
  • role は一切付与しない。root は素の nav の暗黙 ARIA role(navigation)に依拠し、role="menu"/role="menuitem" は付与しない(nav_list と同じ判断、文書ナビを操作メニューと誤伝達しないための設計)。
  • data-motion(アニメーション方向の露出)・viewport 寸法測定は実装しない(intentional-non-adoption.md §3.25 規則 2 により headless 層へ持ち込まない設計判断、module doc「data-motion・viewport 測定を実装しない」節)。

Anatomy

root
  list
    item
      trigger
      content
        link

API Reference

Arguments

NameTypeDefaultDescription
root(label)&strroot(nav)へ付与する aria-label(必須引数)。
trigger(state)OpenState項目の開閉状態。aria-expanded/data-state へ反映される。
link(current)boolfalsetrue のとき aria-current="page"+data-current を出力する。

Data Attributes

PartAttributeObserved Values
contentdata-stateopen
itemdata-stateclosed, open
triggerdata-stateclosed, open
triggerdata-valuedocs, products

Examples

全項目 closed の初期表示

SSR の初期描画時点を想定し、すべての Trigger/Content を closed 状態にした構成です。

Accessibility

WAI-ARIA

AttributeDescription
aria-expanded / aria-controlstrigger に付与。開閉状態と content との関連付け(controls が Some のときのみ)を表す。role は付与しない。
aria-labelledbycontent に付与(labelled_by が Some のときのみ)。role は付与しない。
aria-current="page"link に付与(current が true のときのみ)。role は付与しない。