Navigate components

This article describes components in Components Library > Navigate.

Breadcrumb

The Breadcrumb component displays a navigational trail of links showing the user's current location within the application hierarchy. It supports configurable breadcrumb items, a custom separator, and a maximum visible node count. In the App Designer, select a Breadcrumb on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the structural and behavioural properties of the Breadcrumb. Each Breadcrumb component contains a second-level and a third-level Breadcrumb.Item.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Max nodes	Number input	100	Sets the maximum number of breadcrumb items to display. Items beyond this limit are hidden.
Separator	i18n setter	-	Sets the separator displayed between breadcrumb items. Can be text or an icon. Supports internationalisation.
Breadcrumb item	Switch Setter (Array setter / Variable input)	-	Defines the list of breadcrumb items. See Breadcrumb item configuration.

Breadcrumb item configuration

Each item in the Breadcrumb item array editor has the following properties:

Property	UI Control	Default	Description
Title	i18n setter	Auto-generated	Sets the display text of the breadcrumb item. Supports internationalisation.
Link	Text input	-	Sets the URL the breadcrumb item navigates to when clicked.
Target	Radio group (New window | Same window)	Same window	Specifies whether the link opens in a new tab (_blank) or the same tab (_self).

The Title field is displayed inline in the array list. Click the edit (pencil) icon to open the full item editor, where you can also configure Link and Target. Click the delete (trash) icon to remove an item, or use the grip icon to reorder items. Click "Add an item +" to add a new breadcrumb item.

Breadcrumb.Item (at the second level)

The Breadcrumb.Item component represents a single item in the breadcrumb trail.

A Breadcrumb.Item placed directly under a Breadcrumb component forms the second level of the hierarchy.

Its Props tab contains the visual properties of the Breadcrumb.Item.

Property	UI Control	Default	Description
Text content	Switch Setter (i18n setter / Variable input)	Auto-generated	Sets the display text for this breadcrumb item. Supports internationalisation.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Breadcrumb without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Breadcrumb's supported events:

   • onClick — Triggered when a breadcrumb item is clicked

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onClick handler receives the click event:

onClick(event) {
  // Handle breadcrumb click
}

Advanced

For more information, refer to Advanced.

Pagination

The Pagination component displays a set of page navigation controls for breaking large datasets into pages. It supports multiple display types, configurable page size selectors, jump-to-page input, and custom page number rendering. In the App Designer, select a Pagination on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Pagination.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Type	Radio group (Normal | Simple | Mini)	Normal	Specifies the pagination display type. Normal shows full page controls. Simple shows a compact input-based navigator. Mini shows a minimal set of controls.
Shape	Dropdown (Normal | Arrow-only | Arrow-prev-only | No-border)	Normal	Specifies the style of the previous and next navigation buttons.
Size	Radio group (Small | Medium | Large)	Medium	Sets the overall size of the pagination controls.
Default page number	Switch Setter (Number input / Expression input / Variable input)	-	Sets the initial active page number when the component first renders.
Total count	Number input	100	Sets the total number of items to paginate. Used to calculate the total number of pages.
Total text	i18n setter	-	Sets the total number of rendering functions. Supports internationalisation.
Page show count	Number input	5	Sets the number of page number buttons displayed at a time.
Page size	Number input	10	Sets the number of records displayed per page.
Selector type	Radio group (None | Filter | Dropdown)	-	Controls the type of page size selector. Filter displays an inline input. Dropdown displays a dropdown. None hides the selector.
Custom page number	Function Binding	-	Allows you to customise the rendering of page number buttons and the current page / total pages display.
Page size list	Text input	5,10,20	Sets the available values for the page size selector as a comma-separated string (for example, 10,20,50).
Selector position	Radio group (Start | End)	Start	Specifies the position of the page size selector within the pagination control.
Single page hide	Toggle switch	Off	When enabled, hides the pagination control when there is only one page.
Show jump	Toggle switch	On	Controls the visibility of the jump-to-page input box and button. Only applies when Type is Normal and the total number of pages exceeds 5.
Jump link	Text input	-	Sets a URL template for page number buttons. Use {page} as the placeholder for the page number (for example, https://example.com/page/{page}).

Custom page number

The Custom page number property accepts a function with the following signature:

pageNumberRender(index) {
  return index;
}

This function is applied to the page number buttons as well as the rendering of the current page and the total number of pages.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Pagination without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Pagination's supported events:

   • onChange — Triggered when the current page number changes
   • onPageSizeChange — Triggered when the page size selection changes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new page number and the event:

onChange(current, e) {
  // current: the new page number
}

The onPageSizeChange handler receives the new page size:

onPageSizeChange(pageSize) {
  // pageSize: the newly selected number of records per page
}

Advanced

For more information, refer to Advanced.

Steps

The Steps component (Step Bar) displays a sequence of numbered steps to guide users through a multi-stage process. Each step can show a title, description, icon, progress percentage, and status. In the App Designer, select a Steps on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the visual and structural properties of the Steps.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Display mode	Radio group (Horizontal | Vertical)	Horizontal	Specifies the orientation of the step bar.
Label placement	Radio group (Horizontal | Vertical)	Vertical	Specifies how the step title and content are arranged relative to the step indicator when Display mode is Horizontal.
Type	Radio group (Circle | Arrow | Dot)	Circle	Specifies the visual style of the step indicator. Circle shows a numbered circle. Arrow shows arrow-shaped steps (step content is not displayed). Dot shows a small dot.
Step item	Switch Setter (Array editor / Variable input)	-	Defines the list of step items. See Step item configuration.
Current step	Number input	0	Sets the index of the currently active step (zero-based). The range is determined by the number of step items.
Read only	Toggle switch	Off	When enabled, prevents user interaction on all step elements.
Animate loading	Toggle switch	On	Controls the loading of the widget.
Custom rendering	Function Binding	-	Binds a custom render function (itemRender) for individual step indicators. When you click Bind Function, the Event Binding window appears where you can define the function.

Custom rendering

The Custom rendering property accepts a function with the following signature:

itemRender(data, index) {
  return data;
}

Parameter	Type	Description
data	ReactNode	The default rendered content of the step indicator.
index	Number	The zero-based index of the current step item.

The function must return a ReactNode. You can return the original data unchanged, wrap it in a custom element, or replace it entirely with your own rendering.

Step item configuration

The Step item array editor lists the step items. Click "Add an item +" to add a new step item. Each item displays a Title text field in the list. Click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an item, or use the grip icon to reorder items.

The item editor provides the following properties:

Property	UI Control	Default	Description
Title	i18n setter	StepItem	Sets the title displayed for this step. Supports internationalisation.
State	Radio group (Wait | Process | Finish | Default)	-	Sets the status of this step. When set to Default, the status is derived automatically from the Current step value of the parent Steps component.
Content	Text area	-	Sets the descriptive text displayed below the step title. Not applicable when Type is Arrow.
Icon	Icon selector	-	Sets a custom icon for the step indicator, replacing the default step number.
Percentage	Number input	-	Sets a progress percentage value shown within the step indicator.
Disabled	Toggle switch	Off	Controls whether this step is in a disabled state, preventing user interaction.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Last updated on 20 May 2026