Breadcrumbs

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.

Props

  1. isDisabled

    (Optional)

    Default value

  2. items

    (Required)

    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

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

    (Required)

    Type: Number

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