Skip to Content
文档

面包屑

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

SourceStorybookRecipe

用法

¥Usage

import { Breadcrumb } from "@chakra-ui/react"
<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link />
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
  </Breadcrumb.List>
</Breadcrumb.Root>
info

如果你更喜欢封闭的组件组合，请查看 以下代码片段。

¥If you prefer a closed component composition, check out the snippet below.

示例

¥Examples

尺寸

¥Sizes

使用 size 属性更改面包屑组件的大小

¥Use the size prop to change the size of the breadcrumb component

变量

¥Variants

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

¥Use the variant prop to change the appearance of the breadcrumb component

包含分隔符

¥With Separator

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

¥Use the Breadcrumb.Separator component to add a custom separator

图标

¥Icon

通过在 Breadcrumb.Link 内部渲染面包屑，为其添加自定义图标

¥Add a custom icon to the breadcrumb by rendering it within Breadcrumb.Link

菜单

¥Menu

将 Breadcrumb.Link 封装在 MenuTrigger 中以确保其在菜单组件中正常工作。

¥Wrap the Breadcrumb.Link inside the MenuTrigger to ensure it works correctly within the menu component

省略号

¥Ellipsis

渲染 Breadcrumb.Ellipsis 组件，在面包屑导航项后显示省略号。

¥Render the Breadcrumb.Ellipsis component to show an ellipsis after a breadcrumb item

路由库

¥Routing Library

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

¥Use the asChild prop to change the underlying breadcrumb link

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>
  )
}

已关闭组件

¥Closed Component

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

¥Here's how to setup the Breadcrumb for a closed component composition.

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>
    )
  },
)

如果你想自动将封闭式组件添加到项目中，请运行以下命令：

¥If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add breadcrumb

属性

¥Props

根元素

¥Root

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

variant 'plain'
'underline' | 'plain'

The variant of the component

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

The size of the component

separator
React.ReactNode

separatorGap
SystemStyleObject['gap']

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

Previous

折叠面板

Next

可折叠