面包屑导航

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="/">首页</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">组件</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>面包屑导航</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

示例

基础示例

一个基础的面包屑，包含首页链接和组件链接。

import {
  Breadcrumb,
  BreadcrumbItem,

自定义分隔符

通过给 <BreadcrumbSeparator /> 传入自定义组件作为 children，实现自定义分隔符。

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,

API 参考

Breadcrumb

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

BreadcrumbList

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

BreadcrumbItem

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

BreadcrumbLink

BreadcrumbLink 组件显示面包屑中的可点击链接。

BreadcrumbPage

BreadcrumbPage 组件显示当前所在页面（不可点击）。

BreadcrumbSeparator

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

BreadcrumbEllipsis

BreadcrumbEllipsis 组件显示面包屑折叠状态的省略号指示符。