EuiBreadcrumbs let the user track their progress within and back out of a UX flow. You can provide an href prop on any breadcrumb item that you wish to make clickable, including the last item, though we recommend the last item represent the current page and therefore the link is unnecessary. They work well withinEuiPageContentHeader but be careful not to use them within an app that also uses EuiHeaderBreadcrumbs.

Boa constrictor

Responsive

The responsive prop will hide breadcrumbs on narrower screens. Set it to false when you want to keep breadcrumb items visible at all screens sizes.

Only the last item will show on small (mobile) screens.

Truncate each breadcrumb

There are two ways to truncate breadcrumbs,

on the individual breadcrumb item,
on the full EuiBreadcrumbs set which will force the full set to a single line, while setting a max width on all items except for the last.

Truncation on a single item

Truncation on the entire set

Limit the number of breadcrumbs

Use the max prop to cull breadcrumbs beyond a certain number. By default, this number is 5.

Show the hidden items in a popover

When the breadcrumbs need to be truncated, but you wish to still allow users to navigate to any item in the list, you can use the showMaxPopover prop. When used with the max prop, the hidden breadcrumbs will be rendered into an EuiPopover.