---
title: Header Component
slug: header-component
docTags: 
createdAt: 2024-05-13T14:23:22.314Z
---

## Overview

The Header Component is the section at the top of the page that will display the website's name and navigation.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/Hm57ZDT1JGMg5W4Y21RrO_image.png" size="50" width="340" height="42" position="center" caption="Header component - Page structure" alt="Header component - Page structure" darkWidth="340" darkHeight="42" showCaption="true"}

## Sample Header Component

![Header component - Preview](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/V2GyYVKtH4wIqBf66w32B_header-component.jpg "Header component - Preview")

## General

Here you can customize the look and content of your main website header.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/JDs0XyJ9oxKXzLM-pvXyj_image.png" size="50" width="171" height="673" position="center" darkWidth="171" darkHeight="673" showCaption="false"}

1. **Background** : pick a background color from the rectangular box
2. **Buttons align direction** : Align your buttons horizontal or vertical
3. **Retailer picker dialog text** : Add your own text here
4. **Retailer Group name** : Add your retailer group name here
5. **Retailer dropdown dialog text** : Text that will be visible on the dropdown menu
6. **Enable/disable warning banner **: This will add an extra banner on top of your main header
7. **Enable/disable top menu** : Enable of disable the top menu
8. **Enable/disable retailer selection logic** : Remove retailer selection dropdown from header
9. **Allow close warning banner** : Add close button to warning banner
10. **Background color of warning **: Pick the background color for the warning banner
11. **Color of close icon in warning** : Set the color of the close icon
12. **Text of warning** : Add the text visible in the banner
13. **Mobile Menu title** : Add a title, only visible on mobile.

## Navigation

Use the 'Navigation' sections to manage this component according to your preferences.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/Um2Ne_qeQxMsVmXP5Y2Gv_header-manage-menu.jpg" size="46" width="397" height="731" position="center" caption="Header component - Navigation settings" alt="Header component - Navigation settings" darkWidth="397" darkHeight="731" showCaption="true"}

1. **Manage top menu** : Select what to display in the top menu
2. **Manage main menu** :  Select which pages to display in your main menu
3. **Buttons align** : Align buttons to the left, center or right

### Buttons

You can add buttons by clicking on the + Add button on the right side of the screen.   Cards are used to specify the content of each button.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/6zO6yuPEaL0GuJYh3lHmw_image.png" size="44" width="322" height="392" position="center" caption="Header component - " darkWidth="322" darkHeight="392" showCaption="true"}