The breadcrumb element allows users to visually and hierarchically track their location within the application. This enables users to quickly return to previous pages and navigate without getting lost in the menu structure.

Areas of Use:

• Displaying Category → Subcategory → Product Details screens in e-commerce applications,
• Dashboard → User Management → User Details in administration panels,
• Home → Documents → Reports → 2025-Q1 in document management systems.

The breadcrumb element is only supported in web applications.

Connecting the Data Source

1. Datasources Module

• Go to the Datasources module.
• Click the + icon next to the Tables heading.
• Name the table BreadcrumbData.

3. SQL Actions

Create an action named BreadcrumbData in the SQL Actions section.

SELECT 1 AS Id, ‘Electronics’ AS Label, ‘/electronics’ AS PathBreadcrumb, 0 AS IsActiveUNION ALLSELECT 2, ‘Phones’, ‘/electronics/phones’, 0UNION ALLSELECT 3, ‘iPhone 15’, ‘/electronics/phones/iphone15’, 1

This structure shows that the user is currently on the iPhone 15 Details screen.

UI Design Module Operations

1. Go to the UI Design module.
2. Add the Breadcrumb element from the Elements > Navigation category on the left side.
3. In the Properties panel:
   
   • Options→ Select the BreadcrumbData action.

• Active Item Color → #007BFF (example blue)

Using Properties in a Scenario Context

Options

• Description: Defines the menu items to be displayed in the breadcrumb chain.
• How to Use: Select the BreadcrumbData SQL action. Each row in this action represents a step in the chain.
• Example:
  
  • Electronics
  • Phones
  • iPhone 15

Active Item Color

• Description: Sets the color of the active item (showing the current page) in the breadcrumb chain.
• How to Use: Select a color code from the Properties panel.
• Example: When the color #007BFF is selected, “iPhone 15” appears in blue because it is active.

When the Scenario is Complete

• The user sees the Electronics > Phones > iPhone 15 breadcrumb trail at the top of the screen.
• They can click on the “Electronics” or ‘Phones’ steps to return to higher levels.
• “iPhone 15” appears in a highlighted color because it is active.

Limitations

• Breadcrumb is only available in web applications.
• If the hierarchy order is not created correctly in the SQL data source, the chain will be displayed incorrectly.

Tips and Best Practices

Add ORDER BY Id to the breadcrumb table so that the hierarchy is displayed correctly.

• Use short and clear names for long labels to improve the user experience.
• For theme consistency, Active Item Color should match the application's color palette.