パンくずBreadcrumbExperimental

階層リンクで現在のリソースへのパスを表示します。

プレビュー

状態とバリエーション

ホームをアイコンにする

先頭の階層をアイコンだけで示す場合は aria-label で意味を補います。

長い階層を省略

階層が長い場合は中間を省略し、先頭・現在地・直近の階層を残します。

区切り記号の変更

BreadcrumbSeparator に任意のノードを渡すと、山括弧以外の区切り記号にできます。

概要プレビュー付き

標準装備ではなく、ページのタイトルや説明を HoverCard で合成するバリエーションです。タップでも概要を開き、カード内のボタンで遷移を確認できます。

プロパティ

BreadcrumbLink

表は横にスクロールできます
プロパティ型初期値説明
hrefstring-リンク先 URL。
asChildbooleanfalse子要素をリンクとして描画するか。

BreadcrumbPage

表は横にスクロールできます
プロパティ型初期値説明
childrenReactNode-現在ページとして表示する内容。

BreadcrumbEllipsis

表は横にスクロールできます
プロパティ型初期値説明
labelstring"More"スクリーンリーダー向けの省略ラベル。

使い方

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  useToast,
} from "@gunjo/ui"
import type { MouseEvent } from "react"

function buildNavigationMessage(label: string, href: string) {
  return label + "（" + href + "）への遷移をプレビュー内で確認しました。"
}

export function BreadcrumbExample() {
  const { showToast } = useToast()
  const handleNavigation =
    (label: string, href: string) =>
    (event: MouseEvent<HTMLAnchorElement>) => {
      event.preventDefault()
      showToast(buildNavigationMessage(label, href), "success", 1800)
    }

  return (
    <div className="flex w-full max-w-xl justify-center">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="/" onClick={handleNavigation("ホーム", "/")}>
              ホーム
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="/docs" onClick={handleNavigation("ドキュメント", "/docs")}>
              ドキュメント
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>パンくず</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  )
}

設計の判断

  • いまいるページはリンクにしない。最後の項目は BreadcrumbPage で描きます。a ではなく、aria-current="page" と aria-disabled="true" を持つ要素です。押しても何も起きない、リンクに見えるものを作らないためです。
  • 区切りの記号は読み上げない。区切りは role="presentation" と aria-hidden="true" を持つ li です。読み上げのときに記号の名前が階層のあいだに挟まらないようにしています。
  • 深いときは真ん中を畳む。items にデータを渡して maxItems を決めると、真ん中が三点のボタンに畳まれ、隠れた階層はドロップダウンで開きます。畳まないときも BreadcrumbList が折り返すので、狭い画面で横にはみ出しません。階層を URL ではなく人の辿り方に合わせる、という判断は資料に書いてあります。

使用コンポーネント

BreadcrumbBreadcrumbLinkBreadcrumbPageButtonHoverCardToastProvider

関連コンポーネント

DocumentPagerPaginationNavigationMenu

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Breadcrumbナビゲーション設計 (Navigation Design)