# 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 %}