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 Unqork IDE. 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 trigger 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
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.
Changelog
Date
Change
—
Initial publication.
The browser-based workspace where Creators build, edit, review, and manage Unqork applications. Also referred to as the Unqork platform. The IDE replaces what was previously referred to as UDesigner and Classic Designer, which are considered legacy.
A Property ID is the unique field ID used by Unqork to track and link components in your module.
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.
The Unqork tool used to build individual modules by placing and configuring components on a canvas.
A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.
The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.
The Post Trigger value fires after a component has completed its action. For example, post triggering a component to display the data received from a Plug-In component's API call.
The HTTP POST method is used to send data to a server to create or update a resource, typically including the data in the body of the request.
Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings.
Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.
