Breadcrumb

Breadcrumbs are usually used to navigate across categories and also to help the user to understand where he is.

Examples

Breacrumb with larger margin and custom separator :

The default rendering function expect each element to have at least a name as a string. You can also provide an url to generate a link around this element.

You can provide your own rendering function as element.render. You can also pass a global rendering function as renderElement prop. These functions will be called from most specific to least specific (ie: element, then global, then default). It'll stop at the first function that return a valid JSX component.

Theme

Props

Name

Type

Default value

Description

elements

custom

null

Array elements of this breadcrumb. Should be sorted.

separator

string

' / '

Separator character to put between links.

renderElement

func

null

The function to use for rendering of each element