Breadcrumbs

The trail of links from a site's root to the current page, so a page shows where it sits and every ancestor is one click away.

Source

Demos

For usage examples, visit the component demo page: Breadcrumbs

Import

import { Breadcrumbs } from '@soroush.tech/design-system/Breadcrumbs'

Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	The crumbs. Children that aren't elements are skipped.
`as`	`ElementType`	`'nav'`	The root element.
`separator`	`ReactNode`	`'/'`	Between two crumbs, hidden from assistive technology. An icon separator mirrors right to left.
`maxItems`	`number`	`8`	Past this many crumbs, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse` show, with a button between them.
`itemsBeforeCollapse`	`number`	`1`	Crumbs shown before the button when collapsed.
`itemsAfterCollapse`	`number`	`1`	Crumbs shown after the button when collapsed. When the two cover every crumb, nothing collapses.
`expandLabel`	`string`	-	Names the button that shows the whole trail - no built-in text, so give it whenever the trail can collapse.
`slots`	`{ collapsedIcon?: ElementType }`	-	An icon of your own in the button, in place of `more_horiz`.
`slotProps`	`{ collapsedIcon?: Partial<IconProps> }`	-	Props for the button's icon.
`color`	`keyof Theme['text']`	`'secondary'`	The trail's and its separators' color - the root is a `Typography`.
`typography`	`keyof Theme['typography']`	`'body1'`	The trail's type - the variant its root `Typography` takes.
`align`	`TypographyAlign`	-	Text alignment.
`aria-label`	`string`	-	Names the landmark - always give one.

It takes every other Typography prop too - the styled-system space, layout and position props, className, id and data-testid - but variant, which is typography here: variant names a component's look.

Collapsing

A long trail shows its first and last crumbs and a button between them. Pressing it shows the whole trail and moves focus to its first link, so focus isn't lost with the button. It stays open.

Customization

theme.components.Breadcrumbs styles the root, the list (ol), each item (li), the separator, the collapsed button and its collapsedIcon. Its defaultProps set separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse, color - and expandLabel, which gives every trail the app's language:

createTheme(baseTheme, {
  components: {
    Breadcrumbs: { defaultProps: { expandLabel: 'Afficher le chemin', separator: '›' } },
  },
})

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.