パンくず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>
  )
}

使用コンポーネント

BreadcrumbBreadcrumbLinkBreadcrumbPageButtonHoverCardToastProvider

関連コンポーネント

DocumentPagerPaginationNavigationMenu

設計の判断（UIXHERO）

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

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