Type: React component

How to get Breadcrumbs?


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.


  1. isDisabled


    Type: Boolean

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

    Default value

  2. items


    Type: Array

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

  3. renderBreadcrumbItem


    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.



  4. renderTruncatedBreadcrumbMenuItem


    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.