面包屑

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

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add breadcrumb
Copy

用法

🌐 Usage

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

Copy<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

示例

🌐 Examples

基础

🌐 Basic

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

🌐 A basic breadcrumb with a home link and a components link.

import {
  Breadcrumb,
  BreadcrumbItem,

自定义分隔符

🌐 Custom separator

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

🌐 Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.

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

下拉菜单

🌐 Dropdown

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

🌐 You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.

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

折叠

🌐 Collapsed

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

🌐 We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.

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

链接组件

🌐 Link component

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

🌐 To use a custom link component from your routing library, you can use the asChild prop on <BreadcrumbLink />.

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

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

面包屑

🌐 Breadcrumb

Breadcrumb 组件是根导航元素，它封装了所有的面包屑组件。

🌐 The Breadcrumb component is the root navigation element that wraps all breadcrumb components.

BreadcrumbList

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

🌐 The BreadcrumbList component displays the ordered list of breadcrumb items.

BreadcrumbItem

BreadcrumbItem 组件封装单个面包屑项。

🌐 The BreadcrumbItem component wraps individual breadcrumb items.

BreadcrumbLink

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

🌐 The BreadcrumbLink component displays a clickable link in the breadcrumb.

BreadcrumbPage

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

🌐 The BreadcrumbPage component displays the current page in the breadcrumb (non-clickable).

BreadcrumbSeparator

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

🌐 The BreadcrumbSeparator component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.

BreadcrumbEllipsis

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

🌐 The BreadcrumbEllipsis component displays an ellipsis indicator for collapsed breadcrumb items.