Neumorphism UI

Breadcrumb

現在のページの階層を示し、上位ページへの移動を提供する場合に使います。

プレビュー

中間階層を省略した経路

Components と Navigation のリンク、省略記号、現在の Breadcrumb ページを組み合わせます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/breadcrumb

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

BreadcrumbList に BreadcrumbItem を置きます。上位階層は BreadcrumbLink、現在地は BreadcrumbPage を使い、区切りは次の項目内に配置します。

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";

export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbPage>Settings</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

API リファレンス

nav と ol の native semantics を維持しながら、link、現在のページ、separator、省略された経路を組み合わせます。現在のページには aria-current=page が自動的に設定されます。

コンポーネントプロパティ型デフォルト説明
Breadcrumbaria-labelstring"breadcrumb"経路ナビゲーション領域のアクセシブルな名前です。
BreadcrumbLinkhref必須string—親階層を指す実際の URL です。
BreadcrumbPagechildren必須React.ReactNode—aria-current=page が設定される現在のページ名です。
BreadcrumbSeparatorchildrenReact.ReactNode"/"支援技術から隠される視覚的な separator です。

アクセシビリティ

  • 01

    Breadcrumb は aria-label=breadcrumb が付いた nav で、経路は順序付きの ol として表現されます。

  • 02

    最後の項目には link ではなく BreadcrumbPage を使用し、aria-current=page を公開してください。

  • 03

    Separator と Ellipsis は装飾要素として支援技術から隠されます。