> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/features/header.md).

# Header, toolbar & navigation

How to configure the Menu, Toolbar, Menu drawer, transparent header, logo swapping, and mega-menus.

The header uses separate Menu and Toolbar sections. Menu contains the logo, navigation, and buttons. Toolbar contains announcements. The Menu drawer is in the Drawers group and opens from the Menu button. Each section has its own color scheme, sticky behavior, and transparency settings. Megamenu blocks belong to the Menu section.

## Separate header bars

Each header section is an independent bar. Its position in the header group sets the order. Put Toolbar above Menu for an announcement bar, or below Menu for a secondary bar. You can pin Menu while Toolbar scrolls away.

| Section     | Role                                                                              | Limit |
| ----------- | --------------------------------------------------------------------------------- | ----- |
| Menu        | Logo, primary nav, drawer/search/account/cart buttons. Hosts Megamenu blocks.     | 1     |
| Toolbar     | Announcement and Countdown blocks, optional search/account/locale buttons.        | 1     |
| Menu drawer | Drill-down mobile navigation with its own search bar. Lives in the Drawers group. | n/a   |

## Desktop layout

The Menu is a three-column bar. Two settings under "Layout" place things:

* "Logo": "Left" or "Center".
* "Menu": "Left", "Center", or "Right". Only shown while "Logo" is "Left". A centered logo always pushes the nav links into the left column.

"Width" ("Full" or "Page") and "Padding" size the bar itself.

{% hint style="info" %}
Mobile doesn't use the desktop positions. Below the tablet breakpoint, the drawer button is on the left, the logo is centered, and the cart is on the right.
{% endhint %}

The drawer button's "Menu Drawer" setting ("Mobile" or "Both") decides when the button shows: "Mobile" keeps the full nav on desktop and collapses to the drawer on small screens, "Both" always uses the drawer.

## Transparent over a hero

A transparent Menu overlaps the first section instead of moving it down. Enable "Allow transparent header" on Menu and "Enable transparent header" on the first section. If either setting is off, Menu keeps its background.

The first section's "Transparent style" ("Auto", "Light", "Dark") tells Menu which colors to use. "Auto" checks the section's color scheme. A dark hero uses the global "Dark mode" scheme with light text and the white logo. A light hero uses "Light mode" with dark text and the primary logo. See [color settings](/core-concepts/color.md).

Menu returns to its normal scheme, background, and bottom border when it becomes stuck, is hovered, gains focus, or opens a mega-menu.

The Toolbar has its own "Allow transparent toolbar" toggle, so it can join the overlay or stay solid on its own.

## Logo

Set the logo "Image" and "Width". With no image, the shop name renders as text at "Font size", optionally on a filled pill ("Enable background").

With "Allow transparent header" on, a second "White logo" picker appears. The default logo is assumed to be dark. The white logo appears over a dark transparent header and changes back to the primary logo when Menu becomes solid. A solid Menu with a dark color scheme also uses the white logo. If "White logo" is empty, the primary logo is used in every state.

## Sticky

"Sticky scroll" on each section, independently:

| Option      | Behavior                                     |
| ----------- | -------------------------------------------- |
| "Sticky"    | Always pinned to the top                     |
| "Scroll up" | Hidden on scroll-down, revealed on scroll-up |
| "None"      | Scrolls away with the page                   |

When Menu is sticky, "Background" selects "Solid" or "Blur". Blur adds a translucent backdrop only after Menu becomes stuck. A transparent Menu stays fully transparent at the top of the page. Toolbar only has "Sticky scroll".

## Toolbar

The Toolbar holds Announcement blocks (rich "Text") and Countdown blocks. On mobile the announcements scroll as a marquee. Optional "Search" and "Account" buttons and language/country selectors sit on the right.

"Border" controls the bottom line. "Always" keeps it visible. "When transparent" hides it when the solid background returns. "Never" removes it.

{% hint style="warning" %}
Keep Toolbar the same shade as Menu or one shade lighter. It defaults to a "Tint" background for this reason. A dark Toolbar over a light Menu usually looks disconnected from the rest of the header.
{% endhint %}

## Search and account buttons

The "Search" and "Account" toggles add buttons to the right side of Menu. Each has a "Show on" device setting and a "Mobile position". "Left" puts the mobile button beside the drawer button while the desktop button stays on the right. "Desktop style" selects "Text", "Icon", or "Both". Mobile always uses icons.

The search button opens the predictive search flyout. Search behavior, suggested searches, and the search page are covered in [search](/features/search.md).

## Mega-menus

Add a Megamenu block to Menu. It has no link picker. "Parent link" must match the title of a top-level navigation link. Matching ignores case and punctuation, so "New Arrivals" matches "new-arrivals". An unassigned block shows the available parent link titles in the theme editor.

With "Automatically populate links" on, the panel fills with the parent link's child links (menu levels 2 and 3), and the block's typography settings style each level. Two child blocks add content to the panel:

* **Links**: an extra hand-picked link list with an optional image column
* **Media**: a column of image tiles and cards. Turn "Automatically populate links" off and build the panel from Media blocks alone for a pure promo panel.

"Set column grid" overrides the panel's column count ("Desktop" and "Tablet", 2–6).

With "Show collection images" on (Menu section), nav links that point at a collection render that collection's image as a panel header, cropped to "Collection image aspect ratio".

## Menu drawer

The Menu drawer uses its own "Links" setting and drills down through submenu levels. "Show search bar" adds a predictive search input at the top. Focusing it opens a full-height results view. "Show secondary links", "Show account link", and "Show social links" add the optional links. You can also add language and country selectors. "Show collection images" adds collection banners to drill-down submenus. Add a Card slider block for promos at the bottom.

## Recipes

### Transparent header on a dark hero

Use the transparent contract plus a white logo for the floating-header look:

* Menu › Allow transparent header: on
* Menu › Logo › White logo: a light version of the logo
* First section › Transparent header › Enable transparent header: on
* First section › Transparent header › Transparent style: "Auto"

### Announcement bar over a reveal-on-scroll menu

Use a tinted Toolbar above a Menu that comes back when the shopper scrolls up:

* Toolbar (ordered above Menu) › Background: "Tint"
* Toolbar › Add block: Announcement
* Menu › Sticky › Sticky scroll: "Scroll up"
* Menu › Sticky › Background: "Blur"

### Mega-menu with a promo tile

Use auto-populated links plus a Media column for a catalog panel:

* Menu › Add block: Megamenu
* Megamenu › Parent link: the title of a top-level menu item
* Megamenu › Automatically populate links: on
* Megamenu › Add block: Media, with an Image tile inside

## See also

* [Search](/features/search.md): the predictive flyout and search page
* [Color](/core-concepts/color.md): the light and dark header schemes
* [Cart & conversion](/features/cart.md): cart page and drawer behavior