ナビゲーションと開示@neumorphism-ui/breadcrumb

Breadcrumb

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

@neumorphism-ui/breadcrumb

Registry JSON

プレビュー

インストール

npx shadcn@latest add @neumorphism-ui/breadcrumb

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

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

Example

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">ホーム</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">コンポーネント</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API リファレンス

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

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ