Skip to content
fandhe-frontend
GitHub

Navigation Menu

fandhe-frontend-pre-styled-uinavigation_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
        link

API Reference

Arguments

NameTypeDefaultDescription
label&strroot に付与する aria-label(必須引数)。
stateOpenStateitem/trigger/content の開閉状態(Open/Closed)。
currentboolfalselink に付与。true のとき aria-current="page" + data-current を出力する。

Data Attributes

PartAttributeObserved Values
contentdata-stateopen
itemdata-stateclosed, open
linkdata-current
triggerdata-stateopen
triggerdata-valueproducts

Accessibility

WAI-ARIA

AttributeDescription
aria-labelroot に付与。root の role は素の nav の暗黙 role(navigation)に依拠し明示付与しない。
aria-expanded / aria-controlstrigger に付与。開閉状態(true/false)と content との関連付け(controls が Some のときのみ)を表す。role は付与しない。
aria-labelledbycontent に付与(labelled_by が Some のときのみ)。role は付与しない。
aria-current="page"link に付与(current が true のときのみ)。role は付与しない。