Breadcrumbs

Importing

import { Breadcrumbs } from '@customerio/pluma-components/react';

Usage

The component requires an array of Breadcrumb objects to be passed in via the breadcrumbs prop. At a minimum, a Breadcrumb object should contain the following properties:

• text
  • the text to display for the breadcrumb
• href
  • optional - a URL to link to
• onClick
  • optional - a click handler for the breadcrumb

See the API section for more details on the remaining available properties.

The component will render the provided breadcrumbs, separated by a / character. If href URLs are provided, the breadcrumbs will be rendered as links - except for the last item, which is assumed to be the current page and is rendered as plain text.

<Breadcrumbs
	breadcrumbs={[
		{ text: 'Page 1', href: '#' },
		{ text: 'Page 2', href: '#' },
		{ text: 'Page 3', onClick: (e) => { console.log('Page 3 clicked'); } },
		{ text: 'Page 4', href: '#' },
	]}
/>

Collapse behavior

When the breadcrumbs overflow their container, the component automatically collapses middle items into an ellipsis (…) dropdown menu. The first and last items are always visible, and the collapsed items can be accessed via the dropdown.

The collapse is recalculated on container resize, so the breadcrumbs will adapt to the available space.

Additionally, the maxItems prop can be used to set the maximum number of breadcrumbs to display before collapsing. The default value is 4. The max items count is respected even if the breadcrumbs would fit within the container without collapsing.

<Box style={{ width: 500, maxWidth: '100%', resize: 'horizontal', overflow: 'hidden' }}>
	<Breadcrumbs
		maxItems={6}
		breadcrumbs={[
			{ text: 'Home', href: '#' },
			{ text: 'Products', href: '#' },
			{ text: 'Category', href: '#' },
			{ text: 'Subcategory', href: '#' },
			{ text: 'Sub-subcategory', href: '#' },
			{ text: 'Item', href: '#' },
			{ text: 'Details', href: '#' },
			{ text: 'Detail item', href: '#' }
		]}
	/>
</Box>