# Header

{% hint style="info" %}
The reusable **Header** element is at the top of every page, inside a Floating Group. The Header element does not have a max height due to the Group Focus menus. The max height is set on the Floating Group on each page.
{% endhint %}

<div data-full-width="true"><figure><img src="https://2579826874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV1MErI30ZCe37SndGqT1%2Fuploads%2FLtBo13Aixp2Vae86H5l7%2Fimage.png?alt=media&#x26;token=d8df5061-ed55-47d5-93cb-4a91618b4568" alt=""><figcaption></figcaption></figure></div>

## Header Structure:

The header contains Focus Groups and Popups that serve a variety of purposes.&#x20;

The visible part of the header is the 'g:main' group. Within that are 3 main sections:

1. **g:mobile -- o**nly visible when **var - mobile mode?** is yes
2. **g:desktop** -- only visible when **var - mobile mode?** is yes
3. **g:static** -- always visible. *(User profile pic, light / dark toggle, etc.)*

<figure><img src="https://2579826874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV1MErI30ZCe37SndGqT1%2Fuploads%2FzhFwEwqgC1GdRHGkUTcj%2Fimage.png?alt=media&#x26;token=e3327b17-89d8-4063-b2c2-a4cc03e74030" alt="" width="229"><figcaption></figcaption></figure>

***

## Navigation Menu Items:

These nav items are in a repeating group of "Header Navigation Item" data types. The items in the navigation menu are managed in the admin portal.&#x20;

The repeating group of navigation items is different on desktop vs. mobile.

<figure><img src="https://2579826874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV1MErI30ZCe37SndGqT1%2Fuploads%2FLPRLAn8B0bZ1OjGjwNHF%2Fimage.png?alt=media&#x26;token=bbdcc623-aa17-4f08-bd21-f03982612e75" alt=""><figcaption><p>Desktop Menu</p></figcaption></figure>

<figure><img src="https://2579826874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV1MErI30ZCe37SndGqT1%2Fuploads%2F0F827jvmMZXldpWnlyhL%2Fimage.png?alt=media&#x26;token=628073fe-e0a1-4ae1-a1c6-223071cc69fd" alt="" width="375"><figcaption><p>Mobile Menu</p></figcaption></figure>

* Learn about managing the Header menu in the admin portal -> [header](https://docs.foundationtemplate.com/foundation/admin-portal/header "mention")

***

## User Menu:

When a user is logged in, their profile will replace the Login / Signup buttons that logged out users see.

When the user profile is clicked, it shows a Group Focus menu that contains links relevant to only the Current User.

<figure><img src="https://2579826874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV1MErI30ZCe37SndGqT1%2Fuploads%2FNfGqhl3CZuDdfhazzTMD%2Fimage.png?alt=media&#x26;token=060e7828-3a8a-4eb5-a947-c94b6ce476c3" alt="" width="274"><figcaption></figcaption></figure>

The same happens on mobile, but the user's name is hidden.

<details>

<summary>Complete Onboarding:</summary>

* When user's Onboarding Complete = No, then this is visible.
* It takes you to the Onboarding template page where completion progress is tracked.

</details>

<details>

<summary>Profile</summary>

* Opens a popup where current user can manage their profile and account.

![](https://2579826874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV1MErI30ZCe37SndGqT1%2Fuploads%2FtSCrIlZq3qurBAdyDROn%2Fimage.png?alt=media\&token=2f8fc794-71d8-44ea-8127-193d70f565e8)

</details>

<details>

<summary>Manage Billing</summary>

* If the User has a Stripe subscription, this button is visible.
* On click, it uses the Stripe API Connector to take the user to a secure customer portal managed by Stripe.

</details>

<details>

<summary>Company Settings</summary>

If the user is a Company Owner, this will open a popup to manage that company's account and team members.

Learn more here -> [company-team-and-invites](https://docs.foundationtemplate.com/foundation/company-team-and-invites "mention")<br>

</details>

***

## Workflow - Set Custom State: "Current Page" item

1. On page load, the Header does a search for a Page item that matches the current page name.&#x20;
2. If a Page item doesn't exist in the database (and the user is Admin), then it creates a database item.&#x20;
3. It then sets it to a state on the Header. that's referenced by page variables.

<figure><img src="https://2579826874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV1MErI30ZCe37SndGqT1%2Fuploads%2FGtYiJ2zoUSUsO3bpbSsB%2Fimage.png?alt=media&#x26;token=98b2f6ff-53ed-4445-8f7a-2b0fbe98597e" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
More on page data in [pages-and-sidebar-menu](https://docs.foundationtemplate.com/foundation/admin-portal/pages-and-sidebar-menu "mention") ->
{% endhint %}


---

# 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.foundationtemplate.com/foundation/header.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.