面包屑导航

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 render={<a href="/" />}>首页</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink render={<a 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 /> 上使用 render 属性。

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

API 参考

Breadcrumb

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

BreadcrumbList

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

BreadcrumbItem

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

BreadcrumbLink

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

BreadcrumbPage

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

BreadcrumbSeparator

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

BreadcrumbEllipsis

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