Breadcrumbs 面包屑导航
@lark-ui/core

Breadcrumbs 面包屑导航

显示当前页面在导航层级中所处位置的导航组件。

import { Breadcrumbs } from "@lark-ui/core";
import { House } from "@phosphor-icons/react";

export function BreadcrumbsWithIconsDemo() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Link href="#" icon={<House size={16} />}>
        首页
      </Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Link href="#">项目</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>当前项目</Breadcrumbs.Current>
    </Breadcrumbs>
  );
}

安装

import { Breadcrumbs } from "@lark-ui/core";

用法

import { Breadcrumbs } from "@lark-ui/core";

export function BreadcrumbsDemo() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Link href="#">首页</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Link href="#">文档</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>面包屑导航</Breadcrumbs.Current>
    </Breadcrumbs>
  );
}

示例

基础

import { Breadcrumbs } from "@lark-ui/core";

export function BreadcrumbsDemo() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Link href="#">首页</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Link href="#">文档</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>面包屑导航</Breadcrumbs.Current>
    </Breadcrumbs>
  );
}

加载中

import { Breadcrumbs } from "@lark-ui/core";
import { House } from "@phosphor-icons/react";

export function BreadcrumbsLoadingDemo() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Link href="#" icon={<House size={16} />}>
        首页
      </Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Link href="#">文档</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current loading></Breadcrumbs.Current>
    </Breadcrumbs>
  );
}

根节点

import { Breadcrumbs } from "@lark-ui/core";
import { House } from "@phosphor-icons/react";

export function BreadcrumbsRootDemo() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Current icon={<House size={16} />}>
        Worker 分析
      </Breadcrumbs.Current>
    </Breadcrumbs>
  );
}

剪贴板

import { Breadcrumbs } from "@lark-ui/core";

export function BreadcrumbsWithClipboardDemo() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Link href="#">首页</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>面包屑导航</Breadcrumbs.Current>
      <Breadcrumbs.Clipboard text="#" />
    </Breadcrumbs>
  );
}

API 参考

Breadcrumbs

属性类型默认值说明
size"sm" | "base""base"面包屑导航的尺寸。 - `"sm"` — 适用于信息密集界面的紧凑面包屑导航 - `"base"` — 默认面包屑导航尺寸
childrenReactNode--
classNamestring-通过 `cn()` 合并的额外 CSS 类名。

Breadcrumbs.Link

属性类型默认值
href*string-
iconReact.ReactNode-

Breadcrumbs.Current

属性类型默认值
loadingboolean-
iconReact.ReactNode-

Breadcrumbs.Separator

属性类型默认值

该组件没有专有属性，支持标准 HTML 属性。

Breadcrumbs.Clipboard

属性类型默认值
text*string-