Breadcrumb

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

安装

pnpmnpmyarnbun
pnpm dlx shadcn@latest add breadcrumb
复制

用法

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

Copy<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/" />}>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/components" />}>
        Components
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</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,

RTL

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

"use client"

import Link from "next/link"

API 参考

Breadcrumb

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

BreadcrumbList

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

BreadcrumbItem

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

BreadcrumbLink

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

BreadcrumbPage

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

BreadcrumbSeparator

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

BreadcrumbEllipsis

BreadcrumbEllipsis 组件用于在面包屑折叠时显示省略号指示器。