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.
See EuiTabs guidelines if your application requires breadcrumbs and tabs on the same view.
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.
If you need the ability to close the breadcrumb popover from within your popover content, popoverContent accepts a render function that will be passed a closePopover callback, which you can invoke to close the popover. See the Deployment breadcrumb below for example usage.
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.
Props
EuiBreadcrumbs
Prop | Description and type | Default value |
|---|---|---|
Prop breadcrumbs# | Description and type The array of individual #EuiBreadcrumb items EuiBreadcrumbProps[] | Default value Required |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop responsive# | Description and type Hides extra (above the max) breadcrumbs under a collapsed item as the window gets smaller. Pass Default: boolean | EuiBreadcrumbResponsiveMaxCount | Default value {
xs: 1,
s: 2,
m: 4,
} |
Prop truncate# | Description and type Forces all breadcrumbs to single line and boolean | Default value true |
Prop max# | Description and type Collapses the inner items past the maximum set here number | Default value 5 |
Prop type# | Description and type Determines breadcrumbs appearance, with "page" | "application" | Default value page |
Prop lastBreadcrumbIsCurrentPage# | Description and type Whether the last breadcrumb should be semantically highlighted as the boolean | Default value true |