Navigation Menu
トリガーのクリックで開くナビゲーションパネル(高々 1 項目のみ開く)です。fandhe-frontend-headless-ui の navigation_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
linkAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| root(label) | &str | root(nav)へ付与する aria-label(必須引数)。 | |
| trigger(state) | OpenState | 項目の開閉状態。aria-expanded/data-state へ反映される。 | |
| link(current) | bool | false | true のとき aria-current="page"+data-current を出力する。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| content | data-state | open |
| item | data-state | closed, open |
| trigger | data-state | closed, open |
| trigger | data-value | docs, products |
Examples
全項目 closed の初期表示
SSR の初期描画時点を想定し、すべての Trigger/Content を closed 状態にした構成です。
Accessibility
WAI-ARIA
| Attribute | Description |
|---|---|
| aria-expanded / aria-controls | trigger に付与。開閉状態と content との関連付け(controls が Some のときのみ)を表す。role は付与しない。 |
| aria-labelledby | content に付与(labelled_by が Some のときのみ)。role は付与しない。 |
| aria-current="page" | link に付与(current が true のときのみ)。role は付与しない。 |