---
title: "Header Module"
slug: "header-module"
updated: 2025-09-26T17:33:45Z
published: 2025-09-26T17:33:45Z
canonical: "docs.unqork.io/header-module"
---

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

# Header Module

UDesignerClassic Designer

## Overview

A **header** **module** displays at the top of an application in Express View. In a header module, you might display a logo, insert a CTA, navigational elements, search fields, or other features. Headers exist in a separate [module](/v1/docs/introduction-to-the-module-builder), which you connect to your [application](/v1/docs/introduction-to-unqork-applications) in the [App Details](/v1/docs/introduction-to-unqork-applications) settings.

> [!WARNING]
> Header module RBAC is defined by the [RBAC](/v1/docs/introduction-to-express-role-based-access-control-rbac) of the embedded components.

### Creating a Header Module

Headers are FE front-end modules assigned to the **Header** **Module** drop-down in Application settings.

To create and assign a header module at the Application level:

1. Navigate to your application.
2. Click **+ Create New**.
3. Select **Module**.
4. In the **Module** **Name** field, enter a name for your header module. The **Module****-Path** field autopopulates.

> [!TIP]
> To make it easier to locate your header later, begin your module name with **Header**. For example, **Header: Acme Corp**.
5. From the **Module** **Type** drop-down select **FE** **Front-End**.

> [!WARNING]
> Header Modules are a [front-end element](/v1/docs/what-is-a-module), an application might experience unintended consequences when setting the Module Type to API or Other.
6. Click **Create**.

From here, open the module and customize your header. Here are the following supported components:

- [**Primary Fields**](/v1/docs/primary-fields): All components.
- [**Secondary Fields**](/v1/docs/secondary-fields): [**Button**](/v1/docs/button-component) and [**Hidden**](/v1/docs/hidden-component) components.
- [**Display & Layout**](/v1/docs/display-layout): [**Columns**](/v1/docs/columns-component), [**Field Group**](/v1/docs/field-group-component), [**HTML Element**](/v1/docs/html-element-component), and [**Panel**](/v1/docs/panel-component) components.
- [**Data & Event Processing**](/v1/docs/data-event-processing): [**Data Workflow**](/v1/docs/data-workflow-component), [**Decisions**](/v1/docs/decisions-component), [**Initializer**](/v1/docs/initializer-component), and [Plug-In](/v1/docs/plug-in-component) components.

> [!WARNING]
> Avoid naming components with common values. Header and footer modules cannot have components with the same Property ID. Otherwise, neither display in Express View. It's a best practice to differentiate components with a descriptive name—for example, dwHeaderOutput.

### Connecting a Header Module to an Application

Now that you have a header module, connect it to your application.

To connect a header at the Application level:

1. Navigate to the application that contains your header module.
2. At the top of the page, click `···` **(options)**.
3. Select **Settings**.
4. From the **Header** **Module** drop-down, enter or select the header module.

[![A static image displaying the App Details modal, the Header Module drop-down is selected, and an existing header module is highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/headerModule_AppDetails_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/headerModule%20AppDetails.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)
5. Click **Save & Close**.

### Previewing a Header Module

It's important to note that all modules you plan to have navigate to using your header module must exist in the same application. Otherwise, you'll receive a [403 error](/v1/docs/http-status-codes).

To preview the header module at the Application level:

1. Navigate to the application that contains your header module.
2. At the top of the page, click `···` **(options)**.
3. Select **Preview**. The application displays on a new page with the header module present at the top.

[![A static image displaying the Application page, the options button and Preview buttons are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/headerModule_preview_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/headerModule%20preview(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)

To successfully preview your header module, you must preview it at the Application level. Otherwise, you must manipulate the browser URL to consider any redirects. The URL looks like the following: `https://www.{your-environment}.io/app/{appPath}#/display/{{moduleId}}/{{submissionId}}/{{moduleId}}`.

### Disconnecting a Header Module

If you decide you do not want a header in your application anymore, you can remove it.

To disconnect a header at the Application level:

1. Navigate to the application that contains your header module.
2. At the top of the page, click `···` **(options)**.
3. Select **Settings**.
4. From the **Header** **Module** drop-down, click the **X** next to the Header Module’s name.

[![A static image displaying the App Details modal. The Header Module field displays a X button to disconnect an existing header module.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/headerModule_disconnect_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/headerModule%20disconnect.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)
5. Click **Save & Close**.

> [!NOTE]
> Disconnecting a header module does not delete it.

## Overview

A **header** **module** displays at the top of an application in Express View. In a header module, you might display a logo, insert a CTA, navigational elements, search fields, or other features. Headers exist in a separate [module](/v1/docs/introduction-to-the-module-builder), which you connect to your [application](/v1/docs/introduction-to-unqork-applications) in the [App Details](/v1/docs/introduction-to-unqork-applications) settings.

> [!WARNING]
> Header module RBAC is defined by the [RBAC](https://docs.unqork.io/Content/O-Security/O02-RBAC/O02001-RBAC_Introduction.htm) of the embedded components.

### Creating a Header Module

You'll need to create a header module before connecting it to your application. The best way to achieve this task is to add your header module to the Library. After adding your module to the Library, you can share it with all other applications in your environment.

> [!WARNING]
> If you plan to create a header, be mindful when naming components. Both the header and footer modules cannot have components with the same Property ID. Otherwise, neither display in Express View. It's a best practice to differentiate components with a descriptive name—for example, dwHeaderOutput.

1. At the top right of the Unqork Designer Platform, click the **Librar****y** drop-down.
2. Select **Library Elements**.
3. Click **+ Create New**.
4. In the **Module** **Name** field, enter a name for your header module.

> [!TIP]
> To make it easier to locate your header later, begin your module name with Header. For example, Header: Acme Corp.
5. Click **Create**.

From here, open the module and customize your header. Here are the following supported components:

- [**Primary Fields**](/v1/docs/primary-fields): All components.
- [**Secondary Fields**](/v1/docs/secondary-fields): [**Button**](/v1/docs/button-component) and [**Hidden**](/v1/docs/hidden-component) components.
- [**Display & Layout**](/v1/docs/display-layout): [**Columns**](/v1/docs/columns-component), [**Field Group**](/v1/docs/field-group-component), [**HTML Element**](/v1/docs/html-element-component), and [**Panel**](/v1/docs/panel-component) components.
- [**Data & Event Processing**](/v1/docs/data-event-processing): [**Data Workflow**](/v1/docs/data-workflow-component), [**Decisions**](/v1/docs/decisions-component), [**Initializer**](/v1/docs/initializer-component), and [Plug-In](/v1/docs/plug-in-component) components.

### Connecting a Header Module to an Application

Now that you have a header, connect it to your application.

To connect a header module to your application:

1. Navigate to your workspace and locate your application tile.
2. Click the **ellipsis (···)** button.
3. Select **![Settings Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Settings(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D) Settings**.
4. From the **Header** **Module** drop-down, enter or select a header module.

[![A static image displaying the App Details modal, the Header Module drop-down is selected, and an existing header module is highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Header_module_connectExisting_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Header%20module%20connectExisting.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)
5. Click **Save**.

### Previewing a Header Module

It's important to note that all modules you plan to have navigate to using your header module must exist in the same application. Otherwise, you'll receive a 403 error. The following image shows you how to preview a module at the application level:

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/App_Preview_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/App%20Preview(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)

To successfully preview your header module, you must preview it at the Application level. Otherwise, you must manipulate the browser URL to consider any redirects. The URL looks like the following: `https://www.{your-environment}.io/app/{appPath}#/display/{moduleId}/{submissionId}/{moduleId}`.

### Disconnecting a Header Module

If you decide you do not want a header in your application anymore, you can remove it.

To remove a header module from an application:

1. Navigate to your workspace and locate your application.
2. Click the **ellipsis (···)** button.
3. Select **![Settings Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Settings(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D) Settings**.
4. From the **Header** **Module** drop-down, click the **X** next to the Header Module’s name.

[![A static image displaying the App Details modal. The Header Module field displays a X button to disconnect an existing header module.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Header_module_disconnect_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Header%20module%20disconnect.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)
5. Click **Save**.

## Resources

- [Learn about Login modules](/v1/docs/login-module).
- [Learn about Logout modules](/v1/docs/logout-module).
- [Implement Footer modules](/v1/docs/footer-module).

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.

Call To Action (CTA) is a piece of content designed to persuade an end-user to perform a specific act. An example of a common CTA is a "Buy Now" button.

RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network.