Breadcrumbs

<bk-breadcrumbs></bk-breadcrumbs>

The Breadcrumbs provide a visual representation of the the current nesting path, and allows to go back to any nesting level.

How to configure

The Breadcrumbs component should be supplied with a data-schema containing field labels from the underlying data. These labels are used to display the nesting path in the provided visual representation.

{
  "tag": "bk-breadcrumb",
  "properties": {
    "dataSchema": {
      "type": "object",
      "properties": {
        "colors": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "r": {"type": "number"},
              "g": {"type": "number"},
              "b": {"type": "number"}
            }
          }
        }
      }
    }
  }
}

Examples

A Breadcrumbs component configured like:

{
  "tag": "bk-breadcrumb",
  "properties": {
    "dataSchema": {
      "type": "object",
      "properties": {
        "product": {
          "type": "object",
          "label": {
            "en": "Product",
            "it": "Prodotto"
          },
          "dataSchema": {
            "type": "object",
            "properties": {
              "colors": {
                "type": "array",
                "items": {
                  "type": "object",
                  "properties": {
                    "r": {"type": "number"},
                    "g": {"type": "number"},
                    "b": {"type": "number"}
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

upon receiving two nested-navigation-state/push events with payload including selectedKey property like:

{
  "selectedKey": "product"
}

and

{
  "selectedKey": "colors"
}

(which notify the request to enter the visualization of nested field product and nested field colors respectively), and assuming the browser language setting to be set to english,

visualizes a nesting path that can be represented by a string like:

<home-icon>/Product/Colors

API

Properties & Attributes

property	attribute	type	default	description
dataSchema	-	ExtendedJSONSchema7Definition	-	data schema describing the fields of the collection to display
showHome	show-home	boolean	true	toggles visualization of a "home" icon at breadcrumbs 0-level

Listens to

event	action
nested-navigation-state/push	updates the representation of the nesting path by adding one step
nested-navigation-state/back	updates the representation of the nesting path by removing the specified number of steps
display-data	attempts to recreate current nesting path with new data. If fails, goes back to 0-level

Emits

event	description
nested-navigation-state/back	notifies to go back the specified number of steps in the nesting path