Breadcrumb 面包屑组件 #

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from '@chakra-ui/react'
import { ChevronRightIcon } from '@chakra-ui/icons'

function Example() {
  return (
    <Breadcrumb separator={<ChevronRightIcon color="gray.500" />}>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">首页</BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem>
        <BreadcrumbLink href="#">文档</BreadcrumbLink>
      </BreadcrumbItem>

      <BreadcrumbItem isCurrentPage>
        <BreadcrumbLink href="#">组件</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  )
}

<Breadcrumb separator="-">
  <BreadcrumbItem>
    <BreadcrumbLink href="#">首页</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">产品</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink>详情</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

<Breadcrumb separator={<Text color="gray.400">/</Text>}>
  {/* 内容 */}
</Breadcrumb>

function ProductBreadcrumb({ category, product }) {
  return (
    <Breadcrumb
      fontWeight="medium"
      fontSize="sm"
      separator={<ChevronRightIcon color="gray.500" />}
    >
      <BreadcrumbItem>
        <BreadcrumbLink href="/">首页</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href={`/category/${category.id}`}>
          {category.name}
        </BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem isCurrentPage>
        <BreadcrumbLink>{product.name}</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  )
}

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">
      <HStack spacing={1}>
        <Icon as={HomeIcon} />
        <Text>首页</Text>
      </HStack>
    </BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">设置</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>