# Header & Footer

**Header** and **Footer** are common UI elements used to provide consistent navigation, branding, and contextual information across pages.\
ONEWEB **Page Designer** provides built‑in support for Header and Footer for both **Web applications** and **Mobile applications**.

Starting from **ONEWEB version 5.0.21.01**, Header and Footer are designed as **separate pages** that can be reused and included across multiple pages within the same application.

***

### Header & Footer in Web Applications

#### Enable or Disable Header & Footer

For web pages, Header and Footer can be enabled or disabled through the **Page Settings**.

To configure:

1. Open the page in **Page Designer**
2. Go to **Page Settings**
3. Toggle the option **“Layout of page is Standard?”**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F1FMxstKHkspuaujQMqHc%2Fimage.png?alt=media&#x26;token=79fd0c62-044b-4fb6-b10c-0d1130623976" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Standard layout option in Page Settings</em></p>

When **Standard Layout** is enabled, the page is rendered with Header and Footer as shown below:

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F7mqG5Oq6ITTyikyJk2ho%2Fimage.png?alt=media&#x26;token=d118cf52-16df-4375-a96c-5b283faf8218" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Header and Footer enabled on a web page</em></p>

{% hint style="info" %}
**Note:** Header and Footer are **enabled by default** for web applications.
{% endhint %}

***

#### Default Header & Footer Pages (Version ≥ 5.0.21.01)

From **version 5.0.21.01**, when a new **web application** is created:

* Header and Footer pages are created **automatically**
* These pages appear as independent components
* Users can edit them just like any other page

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F0CWy5pvZszgl8KqTYaC4%2Fimage.png?alt=media&#x26;token=dbc7c32e-c2cc-422c-a52b-56c6f17e9c97" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Default Header &#x26; Footer pages created automatically</em></p>

Users can click the **Edit** icon to design Header and Footer using Page Designer components such as text, images, menus, or links.

***

#### Migrating Header & Footer from Older Versions (≤ 4.0.19.12)

If you migrate an application from **version 4.0.19.12 or earlier**, Header and Footer pages are created during migration but must be **manually linked**.

**Steps to Link Migrated Header & Footer Pages**

1. Open **Components Landing Screen** or **All Components**
2. Click the **Link** option

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F7w0dUO4O78PAnRhX9iNT%2Fimage.png?alt=media&#x26;token=edd2c7cb-7127-429c-8c46-a177a2bbadfe" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Link option on Components screen</em></p>

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FiYoyDt9LpYhXlrRsAo7S%2Fimage.png?alt=media&#x26;token=e2979071-bb21-4eb1-a84f-6af8b450479f" alt=""><figcaption></figcaption></figure>

<p align="center"><em>All Components screen</em></p>

3. In the **Link Component** popup:

* Set **Filter** to **Page**
* Select **Header** and **Footer** pages
* Click **Link**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FtTHpkWZjSAKyO07HhOcI%2Fimage.png?alt=media&#x26;token=119fa6a1-e943-452b-87a6-d12985c0366b" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Link Header &#x26; Footer pages</em></p>

After linking, Header and Footer pages appear in AppSpace:

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FonNzXok1LuRvgo24zg2a%2Fimage.png?alt=media&#x26;token=4316b676-ba7d-4b9b-a9d4-5795d93b2f93" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Header &#x26; Footer visible in Components screen</em></p>

Users can then edit Header and Footer like any other page:

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FUpIeeQVJFBs4wXIBlDDX%2Fimage.png?alt=media&#x26;token=ce089e51-378e-45a2-b81c-9a2b78958d48" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Editing Header page</em></p>

***

### Header & Footer in Mobile Applications

For **mobile applications**, Header and Footer are treated as **UI components** rather than separate pages.

Users can:

* Drag and drop **Header** and **Footer** components
* Place them inside **PageContent**
* Configure layout and behavior as required

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fl94rpedEQL7L4mHrv6aL%2Fimage.png?alt=media&#x26;token=ff66728e-eb05-43fa-9843-a203e37df991" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Header &#x26; Footer components in Mobile Page Designer</em></p>

This approach allows flexible placement and customization tailored to mobile UX patterns.

***

### Design Perspective

As part of **Page Designer best practices**:

* Use Header for branding, navigation, and global actions
* Use Footer for secondary links and informational content
* Reuse Header & Footer pages to maintain consistency
* Keep Header and Footer lightweight to avoid UI clutter

Proper use of Header and Footer ensures a **consistent and professional user experience** across pages and devices.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onewebstack.com/oneweb-platform-th/building-apps/ui-page-designer/ux-ui-components/pages/page-features/header-and-footer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.