# Reusable header

## Overview

Reusable header serves as a navigation bar in your application. The header can be customized according to your requirements, and it saves its state across all the application pages so you don't have to add it to each page separately.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FJ8evWM2id6QnBfLNiCq6%2FCleanShot%202025-02-21%20at%2016.20.02%402x-min.png?alt=media&#x26;token=937b22a3-b153-4cbb-ab19-79b246c8e782" alt=""><figcaption></figcaption></figure>

### Triggers

<table><thead><tr><th width="117.20703125">Name</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td><td></td></tr></tbody></table>

## Working with the component

To activate the header in your application, access the *Settings* sidebar of the current page (click on the app area or select the page in the *Pages* tab), and select the **Show global app header** checkbox.

You can configure header appearance using the following *parameters*:

* **Sticky header** - select this option to make sure the header stays in the same place while users are scrolling down the page
* **Background** color
* **Min rows** - adjust header width
* **Disable container styles** - select to disable all styles or specific ones if you want the header to look more like part of the page and not a separate container

To configure header navigation, you can simply drag and drop components inside it, for example, the *Horizontal menu* component. From there, you can configure additional[ in-app](https://docs.uibakery.io/how-tos/layout-and-navigation/add-navigation-to-application#in-app-navigation) or [external](https://docs.uibakery.io/how-tos/layout-and-navigation/add-navigation-to-application#external-navigation) navigation if needed.

{% @arcade/embed flowId="1LOhYddd1aFkTeeJiWJG" url="<https://app.arcade.software/share/1LOhYddd1aFkTeeJiWJG>" %}