跳转到内容
AsterUI v0.12.76

Breadcrumb 面包屑

显示层级位置的导航面包屑路径。

引入

Section titled “引入”
import { Breadcrumb } from 'asterui'

示例

Section titled “示例”

基本用法

简单的面包屑导航。

 
import { Breadcrumb } from 'asterui'

function App() {
  return (
      <Breadcrumb>
        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="/documents">Documents</Breadcrumb.Item>
        <Breadcrumb.Item>Add Document</Breadcrumb.Item>
      </Breadcrumb>
    )
}

export default App

带图标

带图标的面包屑。

 
import { Breadcrumb } from 'asterui'
import { FolderIcon, DocumentTextIcon } from '@aster-ui/icons'

function App() {
  return (
      <Breadcrumb>
        <Breadcrumb.Item href="/" icon={<FolderIcon size="sm" />}>
          Home
        </Breadcrumb.Item>
        <Breadcrumb.Item href="/documents" icon={<FolderIcon size="sm" />}>
          Documents
        </Breadcrumb.Item>
        <Breadcrumb.Item icon={<DocumentTextIcon size="sm" />}>
          Add Document
        </Breadcrumb.Item>
      </Breadcrumb>
    )
}

export default App

自定义分隔符

使用字符串或 React 节点作为分隔符。

 
import { Breadcrumb } from 'asterui'
import { ChevronRightIcon } from '@aster-ui/icons'

function App() {
  return (
      <div className="space-y-4">
        <Breadcrumb separator="/">
          <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
          <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
          <Breadcrumb.Item>Details</Breadcrumb.Item>
        </Breadcrumb>
        <Breadcrumb separator={<ChevronRightIcon size="sm" />}>
          <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
          <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
          <Breadcrumb.Item>Details</Breadcrumb.Item>
        </Breadcrumb>
      </div>
    )
}

export default App

数据驱动

使用 items 属性实现数据驱动的面包屑。

 
import { Breadcrumb } from 'asterui'

function App() {
  return (
      <Breadcrumb
        items={[
          { title: 'Home', href: '/' },
          { title: 'Products', href: '/products' },
          { title: 'Category', href: '/products/category' },
          { title: 'Item Details' },
        ]}
      />
    )
}

export default App

带滚动的最大宽度

带溢出滚动的面包屑。

 
import { Breadcrumb } from 'asterui'

function App() {
  return (
      <Breadcrumb className="max-w-xs">
        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="/documents">Documents</Breadcrumb.Item>
        <Breadcrumb.Item href="/projects">Projects</Breadcrumb.Item>
        <Breadcrumb.Item href="/team">Team</Breadcrumb.Item>
        <Breadcrumb.Item>Add New Member</Breadcrumb.Item>
      </Breadcrumb>
    )
}

export default App

API

Section titled “API”
Section titled “Breadcrumb”
属性描述类型默认值
childrenBreadcrumb.Item 组件（复合模式）React.ReactNode-
items面包屑项数据（数据驱动模式）BreadcrumbItemType[]-
separator项之间的自定义分隔符React.ReactNode"/"
className额外的 CSS 类名string-
data-testid用于测试的测试 IDstring-
Section titled “BreadcrumbItemType（用于 items 属性）”
属性描述类型默认值
title项标题/标签React.ReactNode-
href链接 URLstring-
onClick点击处理函数() => void-
className自定义 CSS 类名string-
data-testid用于测试的测试 IDstring-
Section titled “Breadcrumb.Item（复合模式）”
属性描述类型默认值
children项内容（文本或元素）React.ReactNode-
href链接 URL（使项可点击）string-
onClick点击处理函数（使项可点击）() => void-
icon标签前显示的图标React.ReactNode-
className额外的 CSS 类名string-
data-testid用于测试的测试 IDstring-

使用提示

Section titled “使用提示”
  • 在最后一项省略 href/onClick 以显示当前位置
  • 使用 max-width 类来启用横向滚动
  • 使用 Breadcrumb.Item 的 icon 属性添加图标