Navigation Component

The Navigation component creates a multi-step wizard or stepper interface. Each step is linked to a Panel component. The Navigation component handles step progression, validation on navigation, button labels, error messaging, and save/submit behavior.

How to read settings tables
The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

General Settings

Setting	Field	Type	Default	Description
Property ID	`key`	Text input	`nav`	The unique identifier for this component instance.

Display Settings

Field Text

Setting	Field	Type	Default	Description
Label Text	`label`	Text input	—	Identifies the component on the canvas and informs end-users what information is requested.

Default State Options

Setting	Field	Type	Default	Description
Hide Field	`hidden`	Toggle	OFF	Hides the navigation component from end-users. Always displays in the Module Builder.

Formatting

Setting	Field	Type	Default	Description
Navigation Title	`navTitle`	Text input	—	A title displayed at the top of the navigation.
Navigation Subtitle	`navSubTitle`	Text input	—	A subtitle displayed under the navigation title.
Confirmation Button	`confirmationButton`	Text input	`OK`	The label on the confirmation button in dialogs.
Next Button	`nextButton`	Text input	`Next`	The label on the Next step button.
Previous Button	`previousButton`	Text input	`Previous`	The label on the Previous step button.
Submit Button	`submitButton`	Text input	`Submit`	The label on the final submit button.
Submit URL	`submitButtonUrl`	Text input	—	The URL to navigate to after submitting.
Success Message	`successMessage`	Text input	`Success!`	The message displayed after a successful submission.
Save Draft and Exit Button	`saveDraftButton`	Text input	`Save and Exit`	The label on the save draft button.
Save and Exit Message	`saveAndExitMessage`	Text input	—	The message displayed after saving a draft and exiting.
Save Draft URL	`saveDraftButtonUrl`	Text input	—	The URL to navigate to after saving a draft.
Error Title	`errorTitle`	Text input	`Oops - {{ errors }} error(s) have been found!`	The heading of the validation error dialog.
Error Message	`errorMessage`	Text input	`Please check your module and fix fields outlined in red`	The body text of the validation error dialog.
Vertical Display	`verticalDisplay`	Toggle	OFF	Displays the navigation steps vertically instead of horizontally.
Show as Tabs	`showAsTabs`	Toggle	OFF	Displays the navigation steps as horizontal tabs.
Validate on Every Navigation	`validateOnNavigation`	Toggle	OFF	Validates the current step whenever the end-user navigates forward or backward.
Display Errors on Top	`errorTop`	Toggle	OFF	Displays validation error messages at the top of the step instead of the bottom.
Scroll Position on Navigation	`scrollToTop`	Radio button	Scroll to Top	Controls the end-user's scroll position when navigating between steps. • Scroll to Top: Returns the end-user to the top of the page on each step change. • Stay in Place: Keeps the end-user's current scroll position.
↳ Vertical Offset	`scollTopOffset`	Number input	—	A pixel offset from the top of the page when scrolling to top. Visible only when Scroll to Top is selected.

Panels

Defines each navigation step and its associated Panel component. Each row represents one step.

Column	Field	Description
Group	`group`	An optional group name for organizing related steps.
Title	`title`	The step title displayed in the navigation.
Heading	`heading`	A heading displayed inside the step.
Value	`value`	The stored value associated with this step.
Panel	`panel`	Property ID of the Panel component displayed for this step.
Hide Previous	`previous`	When checked, this setting hides the Previous button on this step.
Hide Next	`next`	When checked, this setting hides the Next button on this step.
Hide Submit	`submit`	When checked, this setting hides the Submit button on this step.
Hide Draft	`draft`	When checked, this setting hides the Save Draft button on this step.
Save	`save`	When checked, this setting saves the submission when the end-user navigates away from this step.
Post Trigger	`postTrigger`	Property ID of a component to after the step saves.
Post Validation Trigger	`postValidationTrigger`	Property ID of a component to trigger after validation passes.
Pre Trigger	`preTrigger`	Property ID of a component to trigger before the step executes.
Post Save Trigger	`postSaveTrigger`	Property ID of a component to trigger after the step saves successfully.

Data Settings

Advanced Settings

Additional Validation Options

Setting	Field	Type	Default	Description
Save on User Navigation	`autoSave`	Toggle	OFF	Saves module state when the end-user navigates between steps.
Validate on User Navigation	`autoValidate`	Toggle	OFF	Validates the current step when the end-user navigates forward or selects Submit.
Validate Upon Opening Submission	`validateOnOpen`	Toggle	OFF	Validates the module when the end-user opens an existing submission.
Hide Success Message	`hideSuccessMessage`	Toggle	OFF	Hides the success dialog after submission.
Disable Navigation Jumps	`preventNavigationClick`	Toggle	OFF	Prevents end-users from jumping to a specific step by clicking its navigation bubble.
Persistent	`persistent`	Toggle	OFF	Stores the navigation state in the database when the module saves.
Validate All Module Fields	`alwaysValidateAllFields`	Toggle	OFF	Validates all fields on the module, not just visible ones. Does not work with Stagger Load for Performance.
Allow User to Navigate with Errors	`allowNavigation`	Toggle	OFF	lets end-users continue navigating with validation errors, but prevents submission until errors are resolved.
Hide Error Message	`hideErrorMessage`	Toggle	OFF	Hides the validation error dialog.

Set Execution

Setting	Field	Type	Default	Description
Stagger Load for Performance	`staggerLoad`	Toggle	OFF	Loads navigation steps on demand to improve performance. Does not work with Validate All Module Fields.
Debounce Setting	`debounceSetting`	Number input	—	Sets the delay between navigation calls, in milliseconds (ms).

Additional Styling

Setting	Field	Type	Default	Description
Custom CSS Class	`customClass`	Text input	—	A CSS class applied to the component for custom styling.