使用高级 Chakra UI 组件更快地构建 💎

了解更多
跳到内容
文档游乐场指南博客
赞助商

面包屑

用于显示页面在网站层级结构中的位置

源代码Storybook配方

用法

import { Breadcrumb } from "@chakra-ui/react"
<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link />
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
  </Breadcrumb.List>
</Breadcrumb.Root>
信息
如果您更喜欢封闭式组件组合，请查看下面的代码片段。

示例

尺寸

使用 size 属性更改面包屑组件的尺寸

变体

使用 variant 属性更改面包屑组件的外观

带分隔符

使用 Breadcrumb.Separator 组件添加自定义分隔符

图标

通过在 Breadcrumb.Link 中渲染来为面包屑添加自定义图标

将 Breadcrumb.Link 包裹在 MenuTrigger 中，以确保它在菜单组件中正常工作

省略号

渲染 Breadcrumb.Ellipsis 组件以在面包屑项后显示省略号

路由库

使用 asChild 属性更改底层面包屑链接

import { Breadcrumb } from "@chakra-ui/react"
import { Link } from "next/link"

export const Example = () => {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link asChild>
            <Link href="/docs">Docs</Link>
          </Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
      </Breadcrumb.List>
    </Breadcrumb.Root>
  )
}

封闭组件

以下是如何为封闭组件组合设置面包屑。

import {
  Breadcrumb as ChakraBreadcrumb,
  Show,
  type SystemStyleObject,
} from "@chakra-ui/react"
import * as React from "react"

export interface BreadcrumbProps extends ChakraBreadcrumb.RootProps {
  separator?: React.ReactNode
  separatorGap?: SystemStyleObject["gap"]
  items: Array<{ title: React.ReactNode; url?: string }>
}

export const Breadcrumb = React.forwardRef<HTMLDivElement, BreadcrumbProps>(
  function BreadcrumbRoot(props, ref) {
    const { separator, separatorGap, items, ...rest } = props

    return (
      <ChakraBreadcrumb.Root ref={ref} {...rest}>
        <ChakraBreadcrumb.List gap={separatorGap}>
          {items.map((item, index) => {
            const last = index === items.length - 1
            return (
              <React.Fragment key={index}>
                <ChakraBreadcrumb.Item>
                  <ChakraBreadcrumb.Link href={item.url}>
                    {item.title}
                  </ChakraBreadcrumb.Link>
                </ChakraBreadcrumb.Item>
                <Show
                  when={last}
                  fallback={
                    <ChakraBreadcrumb.Separator>
                      {separator}
                    </ChakraBreadcrumb.Separator>
                  }
                >
                  <ChakraBreadcrumb.Item>
                    <ChakraBreadcrumb.CurrentLink>
                      {item.title}
                    </ChakraBreadcrumb.CurrentLink>
                  </ChakraBreadcrumb.Item>
                </Show>
              </React.Fragment>
            )
          })}
        </ChakraBreadcrumb.List>
      </ChakraBreadcrumb.Root>
    )
  },
)

如果您想自动将封闭组件添加到您的项目，请运行以下命令

npx @chakra-ui/cli snippet add breadcrumb

属性

根

属性默认值类型
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

组件的调色板

variant 'plain'
'underline' | 'plain'

组件的变体

size 'md'
'sm' | 'md' | 'lg'

组件的尺寸

separator
React.ReactNode

separatorGap
SystemStyleObject['gap']

as
React.ElementType

要渲染的底层元素。

asChild
boolean

使用提供的子元素作为默认渲染元素，结合它们的属性和行为。

了解更多详情，请阅读我们的 组合 指南。
unstyled
boolean

是否移除组件的样式。

上一页

徽章

下一页

按钮