React 组件

UGBreadcrumb 面包屑

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

导入方式

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

tsx

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

变体预览

基础三层导航。

状态展示

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

尺寸展示

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

代码示例

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

tsx

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

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

Props

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