124k
New

面包屑导航

PreviousNext

使用层级链接展示当前资源的路径。

Base UIReact AriaRadix UI
Radix UI
import Link from "next/link"

import {

安装

pnpm dlx shadcn@latest add breadcrumb

用法

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

组合结构

使用以下组合来构建 Breadcrumb：

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

基础

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

import {
  Breadcrumb,
  BreadcrumbItem,

自定义分隔符

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

import Link from "next/link"
import { DotIcon } from "lucide-react"

下拉菜单

你可以将 <BreadcrumbItem /> 与 <DropdownMenu /> 组合，实现面包屑中的下拉菜单。

import Link from "next/link"
import { ChevronDownIcon, DotIcon } from "lucide-react"

折叠

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

import Link from "next/link"

import {

链接组件

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

import Link from "next/link"

import {

RTL

要启用 shadcn/ui 中的 RTL（从右到左）支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

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

属性类型默认值
classNamestring-

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

属性类型默认值
classNamestring-

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

属性类型默认值
classNamestring-

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

属性类型默认值
classNamestring-

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

属性类型默认值
classNamestring-

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

属性类型默认值
childrenReact.ReactNode-
classNamestring-

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

属性类型默认值
classNamestring-