• 简体中文
  • Breadcrumb 面包屑

    展示当前页面在导航层级中的位置。

    基础用法

    交互预览基础用法
    basic.tsx
    import { Breadcrumb, type BreadcrumbItem } from '@sudden3/leaf-ui';
    import { House } from 'lucide-react';
    
    const items: readonly BreadcrumbItem[] = [
      { title: '首页', href: '#基础用法', icon: <House size={14} /> },
      { title: '项目', href: '#基础用法' },
      { title: 'Leaf Garden' },
    ];
    export function BreadcrumbBasic() {
      return (
        <div className="leaf-demo-stack leaf-demo-stack--wide">
          <Breadcrumb items={items} />
          <Breadcrumb items={items} separator="/" />
        </div>
      );
    }
    
    属性类型默认值说明
    itemsreadonly BreadcrumbItem[]必填路径列表
    separatorReactNodeChevronRight分隔内容
    aria-labelstring语言默认值导航名称
    属性类型默认值说明
    keystring—稳定标识
    titleReactNode必填页面名称
    iconReactNode—前置图标
    hrefstring—跳转地址;省略时显示文本
    targetstring—链接打开方式
    onClickMouseEventHandler<HTMLAnchorElement>—链接点击事件

    类型

    定义组件属性或组装列表时可导入相关类型。

    import type { BreadcrumbProps, BreadcrumbItem } from '@sudden3/leaf-ui';

    使用说明

    最后一项标记为当前页面。BreadcrumbItem 继承原生链接属性,可通过 title 传入路由框架的 Link;没有 href 时不会生成多余的链接。