Docs
面包屑导航

面包屑导航

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

安装

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>

示例

自定义分隔符

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

import { Slash } from "lucide-react"
 
...
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">首页</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>
      <Slash />
    </BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">组件</BreadcrumbLink>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

下拉菜单

您可以将 <BreadcrumbItem /> 与 <DropdownMenu /> 组合在一起，以在面包屑中创建一个下拉菜单。

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
 
...
 
<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger className="flex items-center gap-1">
      组件
      <ChevronDownIcon />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuItem>文档</DropdownMenuItem>
      <DropdownMenuItem>主题</DropdownMenuItem>
      <DropdownMenuItem>GitHub</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

折叠状态

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

import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"
 
...
 
<Breadcrumb>
  <BreadcrumbList>
    {/* ... */}
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    {/* ... */}
  </BreadcrumbList>
</Breadcrumb>

链接组件

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

import { Link } from "next/link"
 
...
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/">首页</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    {/* ... */}
  </BreadcrumbList>
</Breadcrumb>

响应式

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

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

BadgeButton