Navigation Menu
fandhe-frontend-pre-styled-ui の navigation_menu mod が提供するスタイル済み Navigation Menu 部品です。
トリガー起点で開閉するナビゲーションパネルです。Root / List / Item / Trigger / Content / Link の 6 anatomy パーツを持ち、高々 1 個の Trigger だけが開く状態機械(NavigationMenu)を提供します。素の nav/ul/li/button/div/a の暗黙 ARIA role に依拠し、role は一切付与しません(role="menu"/role="menuitem" を付与すると文書ナビを操作メニューと誤伝達するため)。アクティブリンクは aria-current="page" で表します。状態機械を持たない静的なリンク集が必要な場合は Nav List を使ってください。Radix の viewport 寸法測定・data-motion(アニメーション方向の露出)は装飾・アニメーション関心のため実装していません。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
headless-ui の Navigation Menu(役割は素の nav/ul/li/button/div/a の暗黙 ARIA role に依拠し、role は一切付与しません)に pre-styled-ui の recipe CSS を適用した静的掲示です。Products トリガーを開いた状態(data-state="open")で Content 内の 2 リンクを掲示し、About は Trigger/Content を持たない単独リンクとして aria-current="page" によるアクティブリンク表現を掲示します。viewport 測定・data-motion は headless 層に存在しないため掲示していません(詳細は headless-ui の navigation_menu モジュール doc を参照)。
Features
- トリガー起点で開閉するナビゲーションパネル。Root / List / Item / Trigger / Content / Link の 6 anatomy パーツを持つ。
- 高々 1 個の Trigger だけが開く状態機械(SingleSelect を埋め込んだ NavigationMenu)。dispatch は "select"/"toggle"/"deselect"。
- role は一切付与しない。root は素の nav の暗黙 ARIA role(navigation)に依拠し、role="menu"/role="menuitem" は付与しない(文書ナビを操作メニューと誤伝達しないための設計、nav_list と同じ判断)。
- アクティブリンクは aria-current="page" + data-current で表す(role は付与しない)。
- data-motion(アニメーション方向の露出)・viewport 寸法測定は実装しない(intentional-non-adoption.md §3.25 規則 2 により headless 層へ持ち込まない設計判断)。
Anatomy
root
list
item
trigger
content
linkAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| label | &str | root に付与する aria-label(必須引数)。 | |
| state | OpenState | item/trigger/content の開閉状態(Open/Closed)。 | |
| current | bool | false | link に付与。true のとき aria-current="page" + data-current を出力する。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| content | data-state | open |
| item | data-state | closed, open |
| link | data-current | |
| trigger | data-state | open |
| trigger | data-value | products |
Accessibility
WAI-ARIA
| Attribute | Description |
|---|---|
| aria-label | root に付与。root の role は素の nav の暗黙 role(navigation)に依拠し明示付与しない。 |
| aria-expanded / aria-controls | trigger に付与。開閉状態(true/false)と content との関連付け(controls が Some のときのみ)を表す。role は付与しない。 |
| aria-labelledby | content に付与(labelled_by が Some のときのみ)。role は付与しない。 |
| aria-current="page" | link に付与(current が true のときのみ)。role は付与しない。 |