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

# Global Header and Footer

> Add a global header and footer to a UI Flow so the same top and bottom areas display consistently across every page.

export const release_0 = "5.10"

<Badge color="blue" icon="cloud">SaaS · {release_0}</Badge>

<Info>
  **Available on SaaS with FlowX.AI {release_0}.** This feature is live on managed (SaaS) deployments now. Self-hosted deployments receive it with the next LTS release.
</Info>

## Overview

The **Global Header** and **Global Footer** are UI Flow components that display consistently around every page of the flow — a single header at the top and a single footer at the bottom, instead of repeating the same elements on each page.

They are added from a dedicated **global components** section, available only for **UI Flow** resources (not process user tasks), and only on the **Web** device view. Each UI Flow can have at most **one** header and **one** footer.

## Positioning

Both components support two positions:

* **Fixed** — the area stays pinned as the page content scrolls. This is the **default for the header**.
* **Static** — the area scrolls with the page content. This is the **default for the footer**.

Header and footer always span the full width of the flow; there is no width setting.

## Child components

A header or footer can hold the same components as a container — for example **Container**, **Form**, **Button**, **Link**, **Text**, **Image**, **Custom** components, **File Upload**, and **File Download** — so you can build navigation bars, action bars, or persistent menus.

The following components **cannot** be placed inside a header or footer:

* **Collection**
* **Table**
* **Task Management**
* **Chat**

This restriction is enforced on paste as well — pasting a container that contains any of these is rejected.

<Note>
  Navigation areas (pages, zones, tabs, steppers, modals) are not available as children — a header or footer holds content components, not layout structure.
</Note>

## Actions

Components inside a header or footer support the usual event handlers, with one exception: the **Dismiss** action is not available, because a global area is not tied to a single page or modal to dismiss. Forms placed inside a header or footer submit normally.

## Styling

The style panel for a header or footer exposes:

* **Layout** — position (Static or Fixed) and the flex or grid arrangement of children.
* **Sizing** — height (with optional overflow scrolling).
* **Spacing** — padding and margin.

<Note>
  A fixed header and footer are accounted for in page height automatically, so scrollable content and the chat area leave room for them.
</Note>

## Related resources

<CardGroup cols={2}>
  <Card title="Container" icon="box" href="./container">
    The container component that headers and footers build on
  </Card>

  <Card title="Root components" icon="sitemap" href="./root-components">
    How components are structured in the UI Designer
  </Card>
</CardGroup>