Breadcrumb — Arco Design v2.66.18 docs

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

Install

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

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[]	`-`
style	Additional style	CSSProperties	`-`
itemRender	Custom render function for `Breadcrumb.Item`	(route: RouteProps, routes: RouteProps[], paths: string[]) => ReactNode	`-`

Breadcrumb.Item

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

RouteProps

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