Breadcrumb

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

When To Use

When the system has more than two layers in a hierarchy.
When you need to inform the user of where they are.
When the user may need to navigate back to a higher level.

// works when >=5.3.0, recommended ✅
return <Breadcrumb items={[{ title: 'sample' }]} />;

// works when <5.3.0, deprecated when >=5.3.0 🙅🏻‍♀️
return (
  <Breadcrumb>
    <Breadcrumb.Item>sample</Breadcrumb.Item>
  </Breadcrumb>
);

// or

return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version
itemRender	Custom item renderer	(route, params, routes, paths) => ReactNode	-
params	Routing parameters	object	-
items	The routing stack information of router	items[]	-	5.3.0
separator	Custom separator	ReactNode	`/`

ItemType

type ItemType = RouteItemType | SeparatorType

RouteItemType

Property	Description	Type	Default	Version
className	The additional css class	string	-
dropdownProps	The dropdown props	Dropdown	-
href	Target of hyperlink. Can not work with `path`	string	-
path	Connected path. Each path will connect with prev one. Can not work with `href`	string	-
menu	The menu props	MenuProps	-	4.24.0
onClick	Set the handler to handle click event	(e:MouseEvent) => void	-
title	item name	ReactNode	-

SeparatorType

const item = {
  type: 'separator', // Must have
  separator: '/',
};

Property	Description	Type	Default	Version
type	Mark as separator	`separator`		5.3.0
separator	Custom separator	ReactNode	`/`	5.3.0

Use with browserHistory

The link of Breadcrumb item targets # by default, you can use itemRender to make a browserHistory Link.

import { Link } from 'react-router';

const items = [
  {
    path: 'index',
    title: 'home',
  },
  {
    path: 'first',
    title: 'first',
    children: [
      {
        path: '/general',
        title: 'General',
      },
      {
        path: '/layout',
        title: 'Layout',
      },
      {
        path: '/navigation',
        title: 'Navigation',
      },
    ],
  },
  {
    path: 'second',
    title: 'second',
  },
];
function itemRender(route, params, items, paths) {
  const last = items.indexOf(item) === items.length - 1;
  return last ? <span>{item.title}</span> : <Link to={paths.join('/')}>{item.title}</Link>;
}

return <Breadcrumb itemRender={itemRender} items={items} />;

Namu Design

Breadcrumb

Namu Design

Breadcrumb

When To Use

Examples

API

ItemType

RouteItemType

SeparatorType

Use with browserHistory

Design Token

Component Token

Global Token

When To Use

Examples

API

ItemType

RouteItemType

SeparatorType

Use with browserHistory

Design Token

Component Token

Global Token

BreadcrumbChangelog

BreadcrumbChangelog

When To Use

Examples

API

Breadcrumb

ItemType

RouteItemType

SeparatorType

Use with browserHistory

Design Token

Component Token

Global Token

When To Use

Examples

API

Breadcrumb

ItemType

RouteItemType

SeparatorType

Use with browserHistory

Design Token

Component Token

Global Token

Breadcrumb

Breadcrumb