Skip to content
fandhe-frontend
GitHub

Nav List

fandhe-frontend-pre-styled-ui の nav_list mod が提供するスタイル済み Nav List 部品です。root（nav）/ heading（h2）/ list（ul）/ item（li）/ link（a）の 5 anatomy パーツで構成する縦方向の文書ナビ部品で、role を一切出力せず素の HTML の暗黙 ARIA ロールのみを使います。本サイトのサイドバー自体もこの部品の headless 実装で組み立てられています。現在ページは aria-current="page" で示します。水平方向のページ内ナビ（タブ状の見た目）が必要な場合は Tab Nav を使ってください。

関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API

Demo

pre-styled-ui 単独定義の anatomy（data-scope="nav-list"）による静的掲示です。role を一切出力せず、素の nav/h2/ul/li/a の暗黙 ARIA ロールのみを使います。Overview を現在ページ（aria-current="page"）として掲示しています。

Features

  • root（nav）/ heading（h2）/ list（ul）/ item（li）/ link（a）の 5 anatomy パーツ構成（crates/headless-ui/src/nav_list.rs:41-45, 62-97）
  • role を一切付与しない。素の nav/h2/ul/li/a の暗黙 ARIA ロール（navigation/heading/list/listitem/link）のみを使う（pre-styled-ui の menu が WAI-ARIA menu ロールを文書ナビへ転用してしまう意味論不整合を避けるための専用部品。crates/headless-ui/src/nav_list.rs:16-24）
  • link の current=true のとき aria-current="page" + data-current を付与する（crates/headless-ui/src/nav_list.rs:88-101）
  • fandhe-frontend-docs-site 自身のサイドバー（src/nav.rs::sidebar）が本部品の headless 再エクスポートで組み立てられている（crates/pre-styled-ui/src/nav_list.rs:24-38）

Anatomy

root
  heading
  list
    item
      link

API Reference

Arguments

NameTypeDefaultDescription
label（root）&strroot の aria-label（必須引数。複数の nav ランドマークを区別可能にする。crates/headless-ui/src/nav_list.rs:47-55, 61-68）。
href（link）&strlink の href（crates/headless-ui/src/nav_list.rs:90-93）。
current（link）boolfalsetrue のとき aria-current="page" + data-current を付与する（crates/headless-ui/src/nav_list.rs:88-101）。

Data Attributes

PartAttributeObserved Values
linkdata-current

Examples

見出し付きナビリスト

Guides 見出し配下に Overview（現在ページ）・Installation の 2 リンクを掲示します。

Accessibility

Keyboard Interactions

KeyDescription
Tab / Shift+Tab各 link（素の <a>）のブラウザ標準操作でフォーカス移動する。矢印キーでの項目間移動は提供しない（crates/headless-ui/src/nav_list.rs:97-102 スコープ外節）。

WAI-ARIA

AttributeDescription
aria-label（root、必須引数）landmark のアクセシブルネームを常に持つ（crates/headless-ui/src/nav_list.rs:61-68）。
aria-current="page"（link、current=true のとき）現在ページを示す（crates/headless-ui/src/nav_list.rs:88-101）。
role一切出力しない（crates/headless-ui/src/nav_list.rs:16-24）。