Docs
面包屑

面包屑

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

安装

¥Installation

pnpm dlx shadcn@latest add breadcrumb

用法

¥Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
<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

自定义分隔符

¥Custom separator

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

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

import { Slash } from "lucide-react"
 
...
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>
      <Slash />
    </BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

下拉菜单

¥Dropdown

你可以将 <BreadcrumbItem /> 与 <DropdownMenu /> 组合在一起以在面包屑中创建下拉列表。

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

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
 
...
 
<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger className="flex items-center gap-1">
      Components
      <ChevronDownIcon />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuItem>Documentation</DropdownMenuItem>
      <DropdownMenuItem>Themes</DropdownMenuItem>
      <DropdownMenuItem>GitHub</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

折叠

¥Collapsed

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

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

import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"
 
...
 
<Breadcrumb>
  <BreadcrumbList>
    {/* ... */}
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    {/* ... */}
  </BreadcrumbList>
</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"
 
...
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/">Home</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    {/* ... */}
  </BreadcrumbList>
</Breadcrumb>

响应式

¥Responsive

这是一个响应式面包屑的示例，它将 <BreadcrumbItem /> 与 <BreadcrumbEllipsis />、<DropdownMenu /> 和 <Drawer /> 组合在一起。

¥Here's an example of a responsive breadcrumb that composes <BreadcrumbItem /> with <BreadcrumbEllipsis />, <DropdownMenu />, and <Drawer />.

它在桌面上显示下拉菜单，在移动设备上显示抽屉。

¥It displays a dropdown on desktop and a drawer on mobile.

徽章按钮