120k
New

面包屑

PreviousNext

使用链接层次结构显示当前资源的路径。

Base UIReact AriaRadix UI
"use client"

import {

安装

pnpm dlx shadcn@latest add breadcrumb

用法

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">首页</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">组件</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbPage>面包屑</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

组合

使用以下组合构建 Breadcrumb：

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    └── BreadcrumbItem
        └── BreadcrumbPage

基础

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

import {
  Breadcrumb,
  BreadcrumbItem,

自定义分隔符

使用自定义组件作为 <BreadcrumbSeparator /> 的 children，以创建自定义分隔符。

"use client"

import Link from "next/link"

下拉菜单

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

"use client"

import Link from "next/link"

折叠

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

"use client"

import Link from "next/link"

链接组件

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

"use client"

import Link from "next/link"

RTL

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

"use client"

import Link from "next/link"

API 参考

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

属性类型默认值
classNamestring-

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

属性类型默认值
classNamestring-

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

属性类型默认值
classNamestring-

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

属性类型默认值
classNamestring-

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

属性类型默认值
classNamestring-

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

属性类型默认值
classNamestring-

如需更多信息，请参阅 React Aria 文档。