Breadcrumbs

Show where users are in the application.

The basic Breadcrumbs usage.

Custom separator in characters.

Show more information with icons.

Example for use with next.js: keep the href and navigate with the router on click.

Attribute	Description	Type	Accepted values	Default
separator	separator string	`string`	-	`/`
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
href	link address	`string`	-	-
nextLink	render as a link even without `href`	`boolean`	-	`false`
onClick	click event	`(event: MouseEvent) => void`	-	-
...	native props	`AnchorHTMLAttributes`	`'id', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

• An item with href is a link. An item with onClick and no href is a button that takes the focus with Tab and answers to Enter and Space.