The breadcrumb element marks the screen where the application is located as current (current page), while dynamically placing its top-level parent menus on the left side. It updates automatically based on the menu structure and works hierarchically without any manual intervention.
Main settings that can be customized via the Properties panel:
Options: Menu items are defined in this area. For each item, a label, path, and optionally an action (the operation to be triggered after clicking) can be defined.
Active Item Color: Determines the color of the breadcrumb item representing the current (active) page.
Title Field: This is the area where the titles to be displayed on the BreadCrumb are located.
Parent Key Field: Determines the parent (higher level) step of a step within the breadcrumb.
Link Field: Enables the NAVIGATE action to occur when clicking on steps on the breadcrumb. Screen names within the project should be linked to this field.
Key Field: Typically represents a unique value in the table, such as “Id,” and is used to distinguish each row.
BreadCrumb Connection Structure and Sample Scenario
For the BreadCrumb to work correctly, the connection fields must be configured appropriately in the data source (e.g., a table or API source). You can proceed by performing the following checks:
Key Field field: Must be a unique value such as “Id”.
Title Field field: Represents the titles to be displayed on the BreadCrumb.
Parent Key Field: Determines the parent step of a step within the BreadCrumb.
Link Field: Contains the screen names to which the user will be redirected after clicking.
Example Scenario: HomePage / Products / Technology
In this structure, the Link Field must contain the value “Products” so that clicking the “Products” button redirects the user to the Products screen.
For this feature to work correctly, the HomePage, Products, and Technology screens must be defined in the project.
Example Table Structure
At the most basic level, the table for BreadCrumb data should contain the following columns:
Id: A unique ID number for each row.
Page Name: The page name that will appear on the BreadCrumb.
ParentId: The Id value of the previous (parent) page.
LinkField: The name of the screen to navigate to.
Example structure:
1 → HomePage
ParentId: None (first level page)
LinkField: HomePage
2 → Products
ParentId: 1
LinkField: Products
3 → Technology
ParentId: 2
LinkField: Technology
Thanks to this structure, the BreadCrumb element dynamically creates the hierarchy of the screen the user is on and allows them to return to previous pages.
