# Breadcrumb

- Page: https://jiguang132.com/resources/arco-design/docs/breadcrumb
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Used to display the location of the current page and quickly return to the history page.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage. Two separation options are available: separated with icon and separated with slash.
- **Separator**: Custom separator.
- **Size**: Customize the size of various breadcrumbs by specifying the style.
- **With icon**: Customize icons in content.
- **With dropdown**: Use `droplist` or `routes` to specify the drop-down menu.
- **Max count**: Use `maxCount` to set the maximum number of breadcrumbs to render. The rest will be displayed as an ellipsis.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Breadcrumb

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|maxCount|Max count of `Breadcrumb.Item` to show.|number |`-`|
|separator|Custom separator|string \| ReactNode |`<IconObliqueLine />`|
|className|Additional css class|string \| string[] |`-`|
|routes|Set drop-down menu|[RouteProps](#routeprops)[] |`-`|
|style|Additional style|CSSProperties |`-`|
|itemRender|Custom render function for `Breadcrumb.Item`|(route: [RouteProps](#routeprops), routes: [RouteProps](#routeprops)[], paths: string[]) => ReactNode |`-`|

### Breadcrumb.Item

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|href|href|string |`-`|2.40.0|
|droplist|The dropdown menu|[DropdownProps](dropdown#dropdown)['droplist'] |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|dropdownProps|The dropdown props [DropdownProps](/react/components/dropdown)|[DropdownProps](dropdown#dropdown) |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|tagName|Configure the outermost label, which can be an html label or a component|string \| React.FC&lt;any&gt; \| React.ComponentClass&lt;any&gt; |`div`|2.40.0|
|onClick|click callback|(e: any) => void |`-`|2.40.0|

### RouteProps

```js
export interface RouteProps {
  path: string;
  breadcrumbName: string;
  children?: Array<{
    path: string;
    breadcrumbName: string;
  }>;
}
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt