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


  1. isDisabled


    Default value

  2. items


    Type: Array

    An array of item objects to render as breadcrumbs. Each item should at least have a label property. Any other properties are kept on each individual item, to be used when rendering a breadcrumb item element using renderBreadcrumbItem.

  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. truncatedItemWidth


    Type: Number

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