Breadcrumbs

How to get Breadcrumbs

import { Breadcrumbs } from 'fds/components';

Type: Component

Creates a horizontal 'trail of breadcrumb' buttons or links based on the given items and the implementation of renderBreadcrumbItem.

Items on the left are truncated automatically if there is not enough available (horizontal) space.

Note: implementing the 'renderTruncatedBreadcrumbMenuItem' prop changes the behavior of this component. Check its API docs for more detailed information and go to the playground example to see it in action.

Props

# Name Type Description
1. [isDisabled] Boolean

Whether or not the component should be rendered in a disabled state.

  Default value
false
2. items Array

An array of item objects to render as breadcrumbs. Each item is passed to the renderBreadcrumbItem() prop.

3. renderBreadcrumbItem Function

A callback that is called for every item in the given items array. You should return either a BreadcrumbItemButton or BreadcrumbItemLink element depending on which visual style you'd like.

Check the fds-playground/breadcrumbs example for more details.


  Arguments
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
isDisabled Boolean

Whether or not the component should be rendered in a disabled state.

isDropOpened Boolean

Whether or not the Drop corresponding to the component is opened.

isFirstItem Boolean

Whether or not this is the first item in the specified set of items.

isLastItem Boolean

Whether or not this is the last item in the specified set of items.

item Object

The item from the given items array for which to render a breadcrumb item element.

key *

A identifier used by React to distinguish items rendered from an iterator function. Should be set as the "key" property on a component instance. This should preferably be a unique key (like an "id" coming from a backend/CMS). When items are being reordered, React uses this key property to determine which items should be rerendered.

onClick FDS~OnClick

Make sure to pass this along to whatever you are rendering as a breadcrumb item.

  Returns
4. [renderTruncatedBreadcrumbMenuItem] Function

Implementing this callback changes the behavior of this component. By default truncated breadcrumb items are hidden from view. As soon as the the amount of horizontal space taken up by the current breadcrumb items exceeds the available width, the items at the beginning (left) are hidden from view until there is enough space. Then another item is prepended with a "…" label. Clicking this item does not do anything.

If you implement this callback, the behavior of clicking the first item changes: it now opens a drop with a menu, showing a menu item for each of the truncated breadcrumb items.

Check the fds-playground/breadcrumbs example for more details.

5. truncatedItemWidth Number

Import either truncatedBreadcrumbItemButtonWidth or truncatedBreadcrumbItemLinkWidth from fds/system and use that here, depending on whether your rendBreadcrumbItem returns a BreadcrumbItemButton or BreadcrumbItemLink.