Breadcrumbs

import { Breadcrumbs } from '@enmovil/ui-design-system';

Shows a breadcrumb trail built from path, with an optional home icon and an area for actions on the right. Every crumb except the current one is a link, and onItemClick and onHomeClick fire before navigation so you can cancel it.

Properties

Property	Type	Required	Default	Allowed values	Description
path	BreadCrumbList[]	Yes	—	—	Crumbs of the trail, from the top level to the current page. The last one is shown as plain text for the current page; with an empty list the home icon is shown as current. The component must be inside a React Router router.
isHome	boolean	No	true	—	Shows a home icon before the first crumb, linking to homePath. Defaults to true.
homePath	string	No	'/'	—	Route the home icon links to. Defaults to /. Requires isHome.
breadcrumbActions	ReactNode[]	No	[]	—	Elements shown on the right of the trail, such as buttons. Nothing is shown by default.

path

An array of objects (BreadCrumbList). Each object has these fields:

Field	Type	Required	Description
label	string	Yes	Text of the crumb.
link	string	Yes	Route the crumb links to. Not used for the last (current) crumb.

Events

Name	Signature	When it fires
onItemClick	((item: BreadCrumbList, index: number, event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void)	Fires before navigation. Call event.preventDefault() to cancel it. The current (last) crumb is not a link and does not fire.
onHomeClick	((event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void)	Fires before navigation to homePath. Call event.preventDefault() to cancel it.

Children

Breadcrumbs does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.

Loading playground…

Storybook

Open Breadcrumbs in Storybook to try every story with the full set of controls.