面包屑

import Link from "next/link"
import {
  Breadcrumb,

安装

pnpmnpmyarnbun
pnpm dlx shadcn@latest add breadcrumb
Copy

用法

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

Copy<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

示例

基础用法

包含首页链接和组件链接的基础面包屑导航。

import {
  Breadcrumb,
  BreadcrumbItem,

自定义分隔符

使用自定义组件作为 children 传递给 <BreadcrumbSeparator />，即可创建自定义分隔符。

import Link from "next/link"
import {
  Breadcrumb,

下拉菜单

你可以将 <BreadcrumbItem /> 与 <DropdownMenu /> 组合使用，在面包屑中创建下拉菜单。

import Link from "next/link"
import {
  Breadcrumb,

折叠状态

我们提供了 <BreadcrumbEllipsis /> 组件，用于在面包屑过长时显示折叠状态。

import Link from "next/link"
import {
  Breadcrumb,

链接组件

若要使用路由库中的自定义链接组件，可以在 <BreadcrumbLink /> 上使用 asChild 属性。

import Link from "next/link"
import {
  Breadcrumb,

RTL (从右至左)

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

面包屑

Breadcrumb 组件是包裹所有面包屑组件的根导航元素。

BreadcrumbList

BreadcrumbList 组件用于展示有序的面包屑列表。

BreadcrumbItem

BreadcrumbItem 组件用于包裹单个面包屑项。

BreadcrumbLink

BreadcrumbLink 组件用于在面包屑中展示可点击的链接。

BreadcrumbPage

BreadcrumbPage 组件用于在面包屑中展示当前页面（不可点击）。

BreadcrumbSeparator

BreadcrumbSeparator 组件用于展示面包屑项之间的分隔符。你可以传入自定义子组件来覆盖默认的分隔符图标。

BreadcrumbEllipsis

BreadcrumbEllipsis 组件用于展示折叠面包屑项的省略号指示器。