@ug666/react 文档演示

Breadcrumb 面包屑

Breadcrumb 用于表达页面层级关系，帮助用户快速回溯当前位置。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '@ug666/react'

变体预览

基础三层导航。

状态展示

最后一项通常为当前页，不应再提供跳转。

尺寸展示

可通过 className 调整字号与间距适配不同导航区。

代码示例

推荐把 Breadcrumb 放在页面标题上方。

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '@ug666/react'

export function DocsBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">首页</BreadcrumbLink>
        <BreadcrumbSeparator />
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href="/components">组件</BreadcrumbLink>
        <BreadcrumbSeparator />
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink current>Button</BreadcrumbLink>
      </BreadcrumbItem>
    </Breadcrumb>
  )
}

Props 说明

属性	类型	默认值	说明
current	boolean	false	标记当前页，渲染为不可点击文本。
href	string	—	非当前页面包屑链接地址。
children	ReactNode	—	通过 Item / Link / Separator 组合导航层级。