Breadcrumbs
EuiBreadcrumbs let the user track their progress within and back out of a UX flow and work well when used in combination with EuiPageHeader. They are meant to be used at lower page level flows, while EuiHeaderBreadcrumbs should be used for application-wide navigation.
EuiBreadcrumbs requires an array of EuiBreadcrumb objects as breadcrumbs and handles truncation,
including middle-truncation in the case of many items, and mobile responsiveness. Each item accepts an href prop,
though we recommend the last item represent the current page and therefore the link is unnecessary.
For accessibility, it is highly recommended to provide a descriptive aria-label for each set of breadcrumbs.
Limit the number of breadcrumbs
Use the max prop to collapse breadcrumbs beyond a certain number.
The center breadcrumbs will collapse into a single item allowing the user to navigate these items from within a popover.
Truncate each breadcrumb
EuiBreadcrumbs will truncate the full set by default, forcing it to a single line and setting a max width
on all items except for the last. You can turn this off by setting truncate={false}.
Alternatively, you can force truncation on single breadcrumb item by adding truncate: true to the object.
Responsive
EuiBreadcrumbs are responsive by default and will collapse breadcrumbs on narrower screens.
Setting responsive={false} will keep all breadcrumbs visible at all screens sizes.
Alternatively, you can change number of breadcrumbs that show per breakpoint by passing a custom responsive object.
Popover content
If you want a breadcrumb that toggles a popover, e.g. for an account switcher, you can use the popoverContent prop
for this purpose. EuiBreadcrumbs will automatically handle rendering a popover indicator and popover accessibility
best practies for you. We recommend using components such as EuiContextMenu
or EuiListGroup for displaying popover options,
or potentially EuiSelectable if you have many items that require filtering.
You may also pass popoverProps with almost any prop that EuiPopover accepts,
such as customizing panelPaddingSize or anchorPosition. However, props that affect popover state
such as closePopover, isOpen, and button are not accepted as they are controlled automatically
by EuiBreadcrumbs.
Please note that creating a breadcrumb with a popover will nullify any passed href or onClick behavior,
as the only interaction the breadcrumb should have at that point is the popover toggle.
Color for emphasis
Each breadcrumb extends the color options from EuiLink when either an href or onClick
is applied . You can change the default color of a breadcrumb to add emphasis or indicate state like 'danger'
for an error. However, use caution not to use color alone.
Please also note that link colors cannot be overriden for type="application" breadcrumbs.