---
title: Header Elements widgets
slug: configured-commerce/docs/header-elements-widgets
docTags: 
createdAt: 2026-08-13T10:46:20.000Z
---

The header in Spire contains both[ Common Elements widgets](docId\:evAlf3HvDoWhQIATrWIvM) and Header Elements widgets. Like Common Elements widgets, Header Elements widgets are available on any page and provide additional functionality for your Configured Commerce website header.

![Spire\_HeaderElements.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/S2AhAkh5OxcervdRXkhCz-20260720-144543.png)

## Address Drawer

Although you can use these widgets in any order you want, this is the most common order:

:::hint{type="info"}
**Note**

You must be logged in as a website user to use these widgets.
:::

### Address Drawer Container

After using a [Header Ship To Address  widget](docId\:evAlf3HvDoWhQIATrWIvM), use this widget to let customers change their shipping information. This widget opens a container to hold the other Address Drawer elements.

### Customer Selector

This widget displays the current customer's information.

### Punch Out Address

:::hint{type="info"}
**Note**

You must have Punch Out activated to use this widget.
:::

This widget uses the address stored in Punch Out.

### Fulfillment Method Selector

This widget allows the customer to select their preferred fulfillment method, such as **Ship** or **Pick up**.

### Address Drawer Pick Up Location Selector

This widget lets the customer set their preferred pick up location.

### Address Drawer Apply Button

Use this widget to add an **Apply** button for customers to save their preferences.

## Other widgets

These are other widgets you can put in the header. They do not require you to be logged in as a user.

### Header Link List

Use this widget to edit the links in your header.

### Basic

**Add** – Add links to your header. Set the **Destination** and select whether to **Open in a New Window**, then click **Done**. Click **Add** to add another.

### Advanced

You can configure custom CSS for your widget. This is only for display CSS and is not intended for script.

### Main Navigation

Use this widget to edit the links in your header.

### Basic

**Add** – Add links to your header. Choose your **Link Type**:

- **Link** – Set the **Destination** and **Override Title** if needed. Select whether to **Open in New Window** and click **Done**.
- **Mega Menu** – Set the **Destination** and **Override Title** if needed. Select the **Number of Columns** to display. Click **Done**.
- **Cascading Menu** – Set the **Destination** and **Override Title** if needed. Select the **Max Depth**. Click **Done**.
- **Custom Link List** – Add a **Title** and set the **Destination**. You can also add **Child Links** if needed. Click **Done**.

**Show Quick Order**– Select whether to display **Quick Order** in your header.

**Open Parent Pages** – Select whether to open parent pages when users click on a text link in the flyout menu. This requires users to click the chevron to access child pages. If disabled, users can click any link in the flyout menu to go to the submenu of child pages.

### Advanced

You can configure custom CSS for your widget. This is only for display CSS and is not intended for script.

### Search Input

Use this widget to configure the Search box.

### Custom CSS

You can configure custom CSS for your widget. This is only for display CSS and is not intended for script.