---
title: "Navigation Component"
slug: "navigation-component"
updated: 2026-09-15T18:04:29Z
published: 2026-09-15T18:04:29Z
canonical: "docs.unqork.io/navigation-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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. |

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.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

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.

A definition

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.