Breadcrumbs

Show where users are in the application.

Default

Sizes

Separator

Custom separator in characters.

Icons

Show more information with icons.

With NextJS

Example for use with next.js.

APIs

Breadcrumbs.Props

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

Breadcrumbs.Item.Props

AttributeDescriptionTypeAccepted valuesDefault
hreflink addressstring--
nextLinkin next.js routeboolean-false
onClickclick event(event: MouseEvent) => void--
...native propsAnchorHTMLAttributes'id', 'className', ...-

Breadcrumbs.Separator.Props

AttributeDescriptionTypeAccepted valuesDefault
...native propsHTMLAttributes'id', 'className', ...-

NormalSizes

type NormalSizes = 'mini' | 'small' | 'medium' | 'large'