Breadcrumbs

Type: React component

How to get Breadcrumbs?

JavaScript

import { Breadcrumbs } from 'fds/components';

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

  1. isDisabled

    (Optional)

    Type: Boolean

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

    Default value

  2. items

    (Required)

    Type: Array

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

  3. renderBreadcrumbItem

    (Required)

    Type: 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

    Returns

  4. renderTruncatedBreadcrumbMenuItem

    (Optional)

    Type: 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

    (Optional)

    Type: Number

    Deprecated!

    Measurement is now done within the component, all usages of this prop can be removed.

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