cnd-components-mcp/componentData/components/面包屑 Breadcrumb.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 简介

面包屑常用于透出页面的信息层级，用户可以通过面包屑获知当前页面的层级位置、切换信息层级等。

## 示例

```tsx
import React from 'react';
import { Breadcrumb } from '@alicloud/console-components';

export default function Demo1() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item link="#">无影云电脑</Breadcrumb.Item>
      <Breadcrumb.Item link="#">用户与管理员</Breadcrumb.Item>
      <Breadcrumb.Item link="#">组织ID</Breadcrumb.Item>
      <Breadcrumb.Item link="#">策略</Breadcrumb.Item>
    </Breadcrumb>
  );
}

export const meta = {
  title: '默认',
  describe: 'link属性设置面包屑节点链接。',
};

```

```tsx
/* eslint-disable no-script-url */
import React from 'react';
import { Breadcrumb } from '@alicloud/console-components';

const spanStyle = {
  display: 'inline-block',
  width: '160px',
  textOverflow: 'ellipsis',
  overflow: 'hidden',
};

export default function Demo2() {
  return (
    <>
      <Breadcrumb maxNode={5}>
        <Breadcrumb.Item link="javascript:void(0)">无影云电脑</Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">
          <span style={spanStyle}>
            用户与管理员名称实例管理用户与管理员名称实例管理
          </span>
        </Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">组织ID</Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">组织ID</Breadcrumb.Item>
        <Breadcrumb.Item>策略</Breadcrumb.Item>
      </Breadcrumb>
      <br />
      <Breadcrumb maxNode={5}>
        <Breadcrumb.Item link="javascript:void(0)">无影云电脑</Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">
          用户与管理员
        </Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">组织ID</Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">组织ID</Breadcrumb.Item>
        <Breadcrumb.Item link="javascript:void(0)">组织ID</Breadcrumb.Item>
        <Breadcrumb.Item>策略</Breadcrumb.Item>
      </Breadcrumb>
    </>
  );
}

export const meta = {
  title: '超长字段/隐藏字段',
  describe: '通过设置maxNode属性设置最多显示字段，超出省略。',
};

```

## API

### Breadcrumb

| 参数            | 说明                                                               | 类型                                                                                                | 默认值 | 是否必填 | 支持版本 |
| --------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | ------ | -------- | -------- |
| children        | 面包屑子节点，需传入 Breadcrumb.Item                               |  Array\<React.ReactElement\<ItemProps> | boolean | null><br/> | React.ReactElement\<ItemProps> | -      |          | -        |
| maxNode         | 面包屑最多显示个数，超出部分会被隐藏                               | number | 'auto'                                                                                    | 100    |          | -        |
| showHiddenItems | 当超过的项被隐藏时，是否可通过点击省略号展示菜单（包含被隐藏的项） | boolean                                                                                             | false  |          | 1.23     |
| popupContainer  | 弹层挂载的容器节点（在showHiddenItems为true时才有意义）            | DropdownProps\['container']                                                                          | -      |          | 1.23     |
| followTrigger   | 是否跟随trigger滚动（在showHiddenItems为true时才有意义）           | boolean                                                                                             | -      |          | 1.23     |
| popupProps      | 添加到弹层上的属性（在showHiddenItems为true时才有意义）            | DropdownProps                                                                                       | -      |          | 1.23     |
| separator       | 分隔符，可以是文本或 Icon                                          | string | React.ReactNode                                                                           | -      |          | -        |
| component       | 设置标签类型                                                       | React.ComponentType\<BreadcrumbProps> | string                                                     | 'nav'  |          | -        |

### Breadcrumb.Item

| 参数    | 说明                                                                     | 类型                                  | 默认值 | 是否必填 |
| ------- | ------------------------------------------------------------------------ | ------------------------------------- | ------ | -------- |
| link    | 面包屑节点链接，如果设置这个属性，则该节点为`<a />` ，否则是`<span />`   | string                                | -      |          |
| onClick | 元素点击事件<br/><br/>**签名**:<br/>**参数**:<br/>*e*: Click Mouse Event | React.MouseEventHandler\<HTMLElement> | -      |          |

## 无障碍键盘操作指南

| 按键 | 说明         |
| :--- | :----------- |
| Tab  | 切换到下一项 |