Breadcrumb 面包屑

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

基础用法

basic.tsx

import type { BreadcrumbItem } from '@ifhover/leaf-ui';

import { Breadcrumb, Space } from '@ifhover/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 (
    <Space direction="vertical" align="stretch">
      <Breadcrumb items={items} />
      <Breadcrumb items={items} separator="/" />
    </Space>
  );
}

折叠长路径

capabilities.tsx

import { Breadcrumb } from '@ifhover/leaf-ui';

export function Capabilities() {
  return (
    <Breadcrumb
      aria-label={'折叠后的项目路径'}
      maxItems={3}
      items={[
        { title: 'Home', href: '#home' },
        { title: 'Workspace', href: '#workspace' },
        { title: 'Projects', href: '#projects' },
        { title: 'Leaf UI', href: '#leaf' },
        { title: 'Tokens' },
      ]}
    />
  );
}

属性	类型	默认值	说明
`items`	`readonly BreadcrumbItem[]`	必填	必需。路径列表
`separator`	`ReactNode`	ChevronRight	分隔内容
`maxItems`	`number`	—	路径折叠前最多展示的项数。
`itemsBeforeCollapse`	`number`	`1`	折叠后保留的起始项数。
`itemsAfterCollapse`	`number`	`1`	折叠后保留的末尾项数。
`itemRender`	`(item: BreadcrumbItem, index: number) => ReactNode`	—	自定义条目内容。
`aria-label`	`string`	语言默认值	导航名称

BreadcrumbItem

属性	类型	默认值	说明
`key`	`string`	—	稳定标识
`title`	`ReactNode`	必填	必需。页面名称
`icon`	`ReactNode`	—	前置图标
`menu`	`readonly DropdownItem[]`	—	该路径项的下拉菜单。
`href`	`string`	—	链接目标。
`target`	`string`	—	目标的选择器或返回元素的函数；省略时居中。

类型

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

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

使用说明

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

#Breadcrumb 面包屑

#基础用法

#折叠长路径

#Breadcrumb API

#BreadcrumbItem

#类型

#使用说明

Breadcrumb 面包屑

基础用法

折叠长路径

Breadcrumb API

BreadcrumbItem

类型

使用说明