Breadcrumbs

Show where users are in the application.

General

The basic Breadcrumbs usage.

Separator

Custom separator in characters.

Icons

Show more information with icons.

With NextJS

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

APIs

Breadcrumbs.Props

AttributeDescriptionTypeAccepted valuesDefault
separatorseparator stringstring-/
...native propsHTMLAttributes'id', 'className', ...-

Breadcrumbs.Item.Props

AttributeDescriptionTypeAccepted valuesDefault
hreflink addressstring--
nextLinkrender as a link even without hrefboolean-false
onClickclick event(event: MouseEvent) => void--
...native propsAnchorHTMLAttributes'id', 'className', ...-

Breadcrumbs.Separator.Props

AttributeDescriptionTypeAccepted valuesDefault
...native propsHTMLAttributes'id', 'className', ...-
Edit this page on GitHub