React 组件

UGBreadcrumb 面包屑

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGBreadcrumb, UGBreadcrumbItem, UGBreadcrumbLink, UGBreadcrumbSeparator } from '@ug666/ui-react'

变体预览

基础三层导航。

状态展示

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

三种尺寸与长路径

使用 size 统一导航密度；窄容器内的长层级允许自然换行，不产生页面级横向溢出。

代码示例

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

tsx

import { UGBreadcrumb, UGBreadcrumbItem, UGBreadcrumbLink, UGBreadcrumbSeparator } from '@ug666/ui-react'

export function DocsBreadcrumb() {
  return (
    <UGBreadcrumb>
      <UGBreadcrumbItem>
        <UGBreadcrumbLink href="/">首页</UGBreadcrumbLink>
      </UGBreadcrumbItem>
      <UGBreadcrumbSeparator />
      <UGBreadcrumbItem>
        <UGBreadcrumbLink href="/components">组件</UGBreadcrumbLink>
      </UGBreadcrumbItem>
      <UGBreadcrumbSeparator />
      <UGBreadcrumbItem>
        <UGBreadcrumbLink current>UGButton</UGBreadcrumbLink>
      </UGBreadcrumbItem>
    </UGBreadcrumb>
  )
}

属性

属性	类型	默认值	说明
size	'sm' \| 'md' \| 'lg'	'md'	统一控制文字、层级高度与分隔图标尺寸。
current	boolean	false	标记当前页，渲染为不可点击文本。
href	string	—	非当前页面包屑链接地址。
children	ReactNode	—	通过 Item / Link / UGSeparator 组合导航层级。