Skip to main content


Breadcrumbs serve as a navigational aid that visually represents the categorization or path a user has taken to reach the current page. You can keep track of the page from the provided graphical element on the user interface.


Binding Data Options

Breadcrumbs control accepts array of objects in JSON format to display data. There are different ways in which you can bind data to the Breadcrumbs control.

Static Data Option

To display static options in the Breadcrumbs control, you can use the Bind Data option. The Bind Data option must be specified as an array of objects. For example:

"label": "Home",
"value": "/"
"label": "Products",
"value": "/products"
"label": "Category",
"value": "/products/category"


Hover ColorSets the color of the past trail or states of the control when hovered over, providing a visual indication to the user.
Label PropertiesEnables the user to apply different styling attributes to the breadcrumb labels, excluding the current state, for enhanced customization.
Icon PropertiesAllows the user to apply a distinct set of styling to the icon present within the breadcrumb trail, providing visual customization.
Selected Item PropertiesEnables the user to apply a distinct set of styling to the active, selected, or current trail of the navigation page for emphasis.
Separator PropertiesEnables the user to apply styling to the separator icons between each navigation state, allowing customization of the visual appearance.

Data Mapping To bind data to the breadcrumbs control, you can map the distinctive properties of the data to their respective columns. The breadcrumbs control expects data in a specific format, so mapping the properties accordingly ensures a proper connection between the data and the control.

labelRepresents the label or title associated with the breadcrumb step.
valueHolds a specific value or identifier associated with the step.
imageURL or path to an image associated with the breadcrumb step.
iconURL or path to an icon associated with the breadcrumb step.

Control Outputs

The outputs from the Breadcrumbs control, represented by the placeholder {{breadcrumbs}}, can be referenced in other controls, data queries, or JavaScript functions using the control's unique name.

breadcrumbsRepresents the user-selected value from the given path/trail of the breadcrumbs control.


value_selectOccurs when there is a change in the value of the respective control, typically triggered by selecting another option or inputting a new value.