---
title: "How to: Customize Navigation Buttons"
slug: "use-case-custom-navigation-buttons"
description: "Learn to customize navigation buttons in your module with this guide, ensuring effective placement and functionality for user actions."
updated: 2026-01-20T17:42:14Z
published: 2026-01-20T20:38:53Z
canonical: "docs.unqork.io/use-case-custom-navigation-buttons"
---

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

# How to: Customize Navigation Buttons

The [Navigation](/v1/docs/navigation-component) component is ideal for adding navigation buttons to your module, ensuring consistent placement throughout. But sometimes you need a button in a different location. Alternatively, you may only need a single button to perform an action. Because the Navigation component buttons cannot be customized, you’ll explore ways to meet your needs using a [Button](/v1/docs/button-component) component.

## Adding Custom Navigation Buttons

In this how-to guide, you'll configure a Navigation component but hide the navigation buttons that you don't want to use. You'll replace those buttons with custom Button components. Then, you'll initiate the process using [Initializer](/v1/docs/initializer-component) components.

Select the tab that corresponds to your Unqork Designer experience:

UDesignerClassic Designer

## Preconfiguration

First, you'll configure a [Navigation](/v1/docs/navigation-component) component to manage your two [Panel](/v1/docs/panel-component) components, which will collect customer information. Then, you'll set up navigation with custom **Next** and **Previous** buttons.

### Configure the Navigation Component

Configure a [Navigation](/v1/docs/navigation-component) component to manage which [Panel](/v1/docs/panel-component) component becomes active. You'll notice in this configuration that the default **Next** and **Previous** buttons are hidden. You’ll add your own buttons in a later step.

1. In the Module Builder, drag and drop a **Navigation** component onto your canvas.
2. In the **Property ID** and **Label Text** field, enter `navPanels`.
3. In the **Panels** table, enter the following:

| Group | Title | Heading | Value | Panel | Hide Previous | Hide Next |
| --- | --- | --- | --- | --- | --- | --- |
|  | Personal Information |  | panelPersonalInfo | panelPersonalInfo |  | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D) (checked) |
|  | Contact Information |  | panelContactInfo | panelContactInfo | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D) (checked) |  |

![Navigation panel displaying personal and contact information fields with options to hide elements.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(777).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)

> [!NOTE]
> When you first open the configuration window, you may need to resize the columns in your Panels table.
4. Click **Save Component**.

### Configure the Panel Components

These components separate your input fields based on the information you're collecting. You'll have a [Panel](/v1/docs/panel-component) component for personal information and one for contact information.

1. Drag and drop two **Panel** components into your Navigation component.
2. In the **Property ID** and **Canvas Label Text** field, enter the following for each component:

| # | **Property ID** | Canvas Label Text |
| --- | --- | --- |
| 1 | panelPersonalInfo | panelPersonalInfo |
| 2 | panelContactInfo | panelContactInfo |
3. Click **Save Component** after adding each component.

### Configure the Text Field Component

Now, let's add your first input field. You'll use a [Text Field](/v1/docs/text-field-component) component to collect your end-user's full name, placing it inside your `panelPersonalInfo` **Panel** component.

1. Drag and drop a **Text Field** component onto your canvas, placing it inside your `panelPersonalInfo` **Panel** component.
2. In the **Property ID** field, enter `name`.
3. In the **Label Text** field, enter `Full Name`.
4. Click **Save Component.**

### Configure the Date Input Component

Next, let's add the second end-user input field in this configuration. You'll use this [Date Input](/v1/docs/date-input-component) component to collect your end-user's date of birth, placing it inside your `panelPersonalInfo` **Panel** component.

1. Drag and drop a **Date Input** component inside your `panelPersonalInfo` **Panel** component, below your `name` **Text Field** component.
2. In the **Property ID** field, enter `dateOfBirth`.
3. In the **Label Text** field, enter `Date of Birth`.
4. From the **Restrict Date Selection to** drop-down, select **Past Only**.

![Input field for date of birth with validation options and contextual help.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(778).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
5. Click **Save Component.**

### Configure the Phone Number Component

The third end-user input field in this configuration is a [Phone Number](/v1/docs/phone-number-component) component that you’ll place in your `panelContactInfo` **Panel** component.

1. Drag and drop a **Phone Number** component inside your `panelContactInfo` **Panel** component, below your `dateOfBirth` **Date Input** component.
2. In the **Property ID** field, enter `phoneNumber`.
3. In the **Label Text** field, enter `Phone Number`.
4. Click **Save Component**.

### Configure the Email Component

The last end-user input field in this configuration is an [Email](/v1/docs/email-component) component that you’ll place in your `panelContactInfo` **Panel** component.

1. Drag and drop an **Email** component inside your `panelContactInfo` **Panel** component, below the `phoneNumber` **Phone Number** component.
2. In the **Property ID** field, enter `email`.
3. In the **Label Text** field, enter `Email`.
4. Click **Save Component**.

## Configuration

### Configure the `colNext` Columns Component

Next, you'll set up a series of [Columns](/v1/docs/columns-component) components to organize your buttons. You'll leave each column empty except the far-right column. There, you'll place your customized **Next** button.

1. Drag and drop a **Columns** component inside your `panelPersonalInfo` **Panel** component, below your `dateOfBirth` **Date Input** component.
2. In the **Property ID** field, enter `colNext`.
3. Select the **Column Layout** that shows four evenly spaced columns.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(782).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
4. Click **Save Component**.

### Configure the `btnNext` Button Component

Next, let's add the first [Button](/v1/docs/how-to-guide-button-component) component to create a custom button to replace the one you set as hidden in the [Navigation](/v1/docs/navigation-component) component.

1. Drag and drop a **Button** component inside the far-right column of your `colNext` **Columns** component.
2. In the **Property ID** field, enter `btnNext`.
3. In the **Label Text** field, enter `Next Page`.
4. From the **Action Type** drop-down, select **Event.**
5. In the **On Click** field, enter `initNext`.

> This configuration connects your Button component to an Initializer component you’ll add next.

![Button configuration settings with action triggers and icons for user interaction.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(779).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
6. In the **Right Icon** field, enter `glyphicon glyphicon-chevron-right`.

> [!NOTE]
> This configuration is a standard GLYPHICONS® glyph code supported by the Button component. For a full list of other glyph codes, visit [https://getbootstrap.com/docs/3.3/components/](https://getbootstrap.com/docs/3.3/components/).
7. Click **Save Component**.

### Configure the `initNext` Initializer Component

Now, you'll add an [Initializer](/v1/docs/initializer-component) component that gets triggered when you click your **Next** button. Then, the Initializer component sends a **Next** value back to the Navigation component.

1. Drag and drop an **Initializer** component inside your `panelPersonalInfo` **Panel** component, below your `dateOfBirth` **Date Input** component.
2. In the **Property ID** and **Canvas Label Text** field, enter `initNext`.
3. From the **Trigger Type** drop-down**,** select **Manual**.
4. In the **Outputs** table, enter the following:

| Property ID | Type | Value |
| --- | --- | --- |
| navPanels | navigation | next |

![Initializer settings showing property ID, canvas label text, and navigation outputs.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(780).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
5. Click **Save Component**.

### Configure the `colPrevious` Columns Component

This [Columns](/v1/docs/columns-component) component serves the same purpose as the first set of columns that you added. The only difference is that this set will hold your custom **Previous** button. You'll leave each column empty except the far-right column. There, you'll place your **Previous** button.

1. Drag and drop a second **Columns** component inside your `panelContactInfo` **Panel** component, below your `email` **Email** component.
2. In the **Property ID** field, enter `colPrevious`.
3. Select the **Column Layout** that shows four evenly spaced columns.

![Display options for columns with highlighted selection for nested fields settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(786).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
4. Click **Save Component**.

### Configure the `btnPrevious` Button Component

Next, let’s add another [Button](/v1/docs/button-component) component that represents your **Previous** button.

1. Drag and drop a second **Button** component in the far-right column of your `colPrevious` **Columns** component.
2. In the **Property ID** field, enter `btnPrevious`.
3. In the **Label Text** field, enter `Previous Page`.
4. In the **Left Icon** field, enter `glyphicon glyphicon-chevron-left`.

> [!NOTE]
> This is a standard GLYPHICONS® glyph code supported by the Button component. For a full list of other glyph codes you can use, visit [https://getbootstrap.com/docs/3.3/components/](https://getbootstrap.com/docs/3.3/components/).
5. From the **Action Type** drop-down, select **Event.**
6. In the **On Click** field, enter `initPrevious`.

![Button configuration settings for navigating to the previous page in a user interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(783).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
7. Click **Save Component**.

### Configure the `initPrevious` Initializer Component

Next, you'll add an [Initializer](/v1/docs/initializer-component) component that is triggered when you click your **Previous** button. Then, the Initializer component sends a **previous** value back to your [Navigation](/v1/docs/navigation-component) component.

1. Drag and drop a second **Initializer** component inside your `panelContactInfo` **Panel** component, below your `email` **Email** component.
2. In the **Property ID** and **Canvas** **Label Text** field, enter `initPrevious`.
3. From the **Trigger Type** drop-down, select **Manual.**
4. In the **Outputs** table, enter the following:

| Property ID | Type | Value |
| --- | --- | --- |
| navPanels | navigation | previous |

![Initializer settings showing manual trigger type and navigation outputs for previous value.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(784).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
5. Click **Save Component**.
6. **Save** your module.

Here's how your configured module looks in the Module Builder:

![Form fields for personal and contact information with navigation buttons for next and previous steps.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(785).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)

Preview your module in Express View. You'll see your Personal Information panel along with your custom **Next** button. If you click **Next**, you navigate to the Contact Information page. Clicking **Previous** navigates you back a page. This is the same functionality as a Navigation component, but you can control the placement and functionality of your navigation buttons.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Buttons_Navigation_Express.gif?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)

## Preconfiguration

First, you'll configure a [Navigation](/v1/docs/navigation-component) component to manage your two [Panel](/v1/docs/panel-component) components, which will collect customer information. Then, you'll set up navigation with custom **Next** and **Previous** buttons.

### Configure the Navigation Component

Configure a [Navigation](/v1/docs/navigation-component) component to manage which [Panel](/v1/docs/panel-component) component becomes active. You'll notice in this configuration that the default **Next** and **Previous** buttons are hidden. You’ll add your own buttons in a later step.

1. In the Module Builder, drag and drop a **Navigation** component onto your canvas.
2. In the **Label** and **Property Name** field, enter `navPanels`.
3. In the **Panels** table, enter the following:

| Group | Title | Heading | Value | Panel | Hide Previous | Hide Next |
| --- | --- | --- | --- | --- | --- | --- |
|  | Personal Information |  | panelPersonalInfo | panelPersonalInfo |  | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(12).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D) (checked) |
|  | Contact Information |  | panelContactInfo | panelContactInfo | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(12).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D) (checked) |  |

![Navigation panel settings with options for personal and contact information displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Buttons_Navigation_NavComponent.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)

> [!NOTE]
> When you first open the configuration window, you may need to resize the columns in your Panels table.
4. Click **Save**.

### Configure the Panel Components

These components separate your input fields based on the information you're collecting. You'll have a [Panel](/v1/docs/panel-component) component for personal information and one for contact information.

1. Drag and drop two **Panel** components onto your canvas.
2. In the **Property ID** and **Label Text** field, enter the following for each component:

| # | **Property ID** | Label Text |
| --- | --- | --- |
| 1 | panelPersonalInfo | panelPersonalInfo |
| 2 | panelContactInfo | panelContactInfo |
3. **Save** **& Close** each component as you add it.

### Configure the Text Field Component

Now, let's add your first input field. You'll use a [Text Field](/v1/docs/text-field-component) component to collect your end-user's full name, placing it inside your `panelPersonalInfo` **Panel** component.

1. Drag and drop a **Text Field** component inside your `panelPersonalInfo` **Panel** component.
2. In the **Property ID** field, enter `name`.
3. In the **Label Text** field, enter `Full Name`.
4. Click **Save & Close.**

### Configure the Date Input Component

Next, let's add the second end-user input field in this configuration. You'll use this [Date Input](/v1/docs/date-input-component) component to collect your end-user's date of birth, placing it inside your `panelPersonalInfo` **Panel** component.

1. Drag and drop a **Date Input** component inside your `panelPersonalInfo` **Panel** component, below your `name` **Text Field** component.
2. In the **Property ID** field, enter `dateOfBirth`.
3. In the **Label Text** field, enter `Date of Birth`.
4. From the **Restrict to** drop-down, select **Past Only**.

![Date input settings with validation messages for required fields and date restrictions.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Buttons_Navigation_DateInput.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
5. Click **Save & Close**.

### Configure the Phone Number Component

The third end-user input field in this configuration is a [Phone Number](/v1/docs/phone-number-component) component that you’ll place in your `panelContactInfo` **Panel** component.

1. Drag and drop a **Phone Number** component inside your `panelContactInfo` **Panel** component, below your `dateOfBirth` **Date Input** component.
2. In the **Property ID** field, enter `phoneNumber`.
3. In the **Label Text** field, enter `Phone Number`.
4. Click **Save**.

### Configure the Email Component

The last end-user input field in this configuration is an [Email](/v1/docs/email-component) component that you’ll place in your `panelContactInfo` **Panel** component.

1. Drag and drop an **Email** component inside your `panelContactInfo` **Panel** component, below the `phoneNumber` **Phone Number** component.
2. In the **Property ID** field, enter `email`.
3. In the **Label Text** field, enter `Email`.
4. Click **Save**.

## Configuration

### Configure the `colNext` Columns Component

Next, you'll set up a series of [Columns](/v1/docs/columns-component) components to organize your buttons. You'll leave each column empty except the far-right column. There, you'll place your customized **Next** button.

1. Drag and drop a **Columns** component inside your `panelPersonalInfo` **Panel** component, below your `dateOfBirth` **Date Input** component.
2. In the **Property ID** field, enter `colNext`.
3. Select the **Column Layout** that shows four evenly spaced columns.
4. Click **Save & Close**.

### Configure the `btnNext` Button Component

Next, let's add the first [Button](/v1/docs/how-to-guide-button-component) component to create a custom button to replace the one you set as hidden in the [Navigation](/v1/docs/navigation-component) component.

1. Drag and drop a **Button** component in the far-right column of your `colNext` **Columns** component.
2. In the **Property ID** field, enter `btnNext`.
3. In the **Label Text** field, enter `Next Page`.
4. In the **Right Icon** field, enter `glyphicon glyphicon-chevron-``right`.

> [!NOTE]
> This configuration is a standard GLYPHICONS® glyph code supported by the Button component. For a full list of other glyph codes, visit [https://getbootstrap.com/docs/3.3/components/](https://getbootstrap.com/docs/3.3/components/).
5. From the **Button Action Type** drop-down, select **Event.**
6. In the **Trigger on Click** field, enter `initNext`.

> This configuration connects your Button component to an Initializer component you’ll add next.

![Button configuration settings with action types and user feedback options displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(815).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
7. Click **Save & Close**.

### Configure the `initNext` Initializer Component

Now, you'll add an [Initializer](/v1/docs/initializer-component) component that gets triggered when you click your **Next** button. Then, the Initializer component sends a **Next** value back to the Navigation component.

1. Drag and drop an **Initializer** component inside your `panelPersonalInfo` **Panel** component, below your `dateOfBirth` **Date Input** component.
2. In the **Property ID** and **Canvas Label Text** field, enter `initNext`.
3. Set the **Trigger Type** as **Manual**.
4. In the **Outputs** table, enter the following:

| Property ID | Type | Value |
| --- | --- | --- |
| navPanels | navigation | next |

![Display settings for manual trigger type and property ID in the initializer interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(816).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
5. Click **Save & Close**.

### Configure the `colPrevious` Columns Component

This [Columns](/v1/docs/columns-component) component serves the same purpose as the first set of columns that you added. The only difference is that this set will hold your custom **Previous** button. You'll leave each column empty except the far-right column. There, you'll place your **Previous** button.

1. Drag and drop a second **Columns** component inside your `panelContactInfo` **Panel** component, below your `email` **Email** component.
2. In the **Property ID** field, enter `colPrevious`.
3. Select the **Column Layout** that shows four evenly spaced columns.
4. Click **Save**.

### Configure the `btnPrevious` Button Component

Next, let’s add another [Button](/v1/docs/button-component) component that represents your **Previous** button.

1. Drag and drop a second **Button** component in the far-right column of your `colPrevious` **Columns** component.
2. In the **Property ID** field, enter `btnPrevious`.
3. In the **Label Text** field, enter `Previous Page`.
4. In the **Left Icon** field, enter `glyphicon glyphicon-chevron-``left`.

> [!NOTE]
> This is a standard GLYPHICONS® glyph code supported by the Button component. For a full list of other glyph codes you can use, visit [https://getbootstrap.com/docs/3.3/components/](https://getbootstrap.com/docs/3.3/components/).
5. Set the **Button Action Type** as **Event**
6. In the **Trigger on Click** field, enter `initPrevious`.

![Button configuration settings with action types and user feedback options displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(817).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
7. Click **Save**.

### Configure the `initPrevious` Initializer Component

Next, you'll add an [Initializer](/v1/docs/initializer-component) component that is triggered when you click your **Previous** button. Then, the Initializer component sends a **previous** value back to your [Navigation](/v1/docs/navigation-component) component.

1. Drag and drop a second **Initializer** component inside your `panelContactInfo` **Panel** component, below your `email` **Email** component.
2. In the **Property ID** and **Label Text** field, enter `initPrevious`.
3. Set the **Trigger Type** as **Manual.**
4. In the **Outputs** table, enter the following:

| Property ID | Type | Value |
| --- | --- | --- |
| navPanels | navigation | previous |

![Display settings for manual trigger type and property ID inputs in a user interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(818).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)
5. Click **Save**.
6. **Save** your module.

Here's how your completed module looks in the Module Builder:

![Module editor interface displaying personal and contact information fields with navigation options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Buttons_Navigation_ModuleEditor.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)

Preview your module in Express View. You'll see your Personal Information panel along with your custom **Next** button. If you click **Next**, you navigate to the Contact Information page. Clicking **Previous** navigates you back a page. This is the same functionality as a Navigation component, but you can control the placement and functionality of your navigation buttons.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Buttons_Navigation_Express.gif?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A50Z&se=2026-11-07T18%3A57%3A50Z&sr=c&sp=r&sig=Yl7WmoSfT12kq7HJEDFU336lyra%2Fyq%2Bm21hWR9irdlw%3D)

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.