Header Meganav

A navigation item that opens a dropdown. The left side is a menu of links, the right side holds featured cards.

Used for “Shop” in the main navigation.

Settings

Setting	What it does
Title	The nav label.
URL	Optional. Clicking the nav label always opens the dropdown — it never navigates. If you set a URL it appears as the first entry in the dropdown, labelled “All {title}”.
Subnav menu	The link list shown down the left of the dropdown.
Glow colour	Colour of the soft blur behind the label on hover and while open. Defaults to Sun.

The glow is configurable per block, so different top-level items can carry different accent colours.

Blocks

Two card types go in the right-hand side:

Featured product — a product with optional title, description, image and URL overrides. Empty overrides fall back to the product’s own values.

Page link — a generic card pointing anywhere, with its own title, description and image. Use it for editorial or landing pages that aren’t products.

Behaviour

Opens on click, closes on click-outside or Escape. Only one meganav is open at a time — opening one dispatches an event the header listens for.

On mobile the panel is a dark full-width surface inside the drawer; on desktop it’s a light rounded panel below the header bar. While any dropdown is open the header bar turns solid white, so the bar and the panel read as one surface.

Note

The nav label is a button, not a link — it opens the dropdown and never navigates on its own. Set the URL field if you want a landing page for the section; it shows up as the first item in the dropdown.

Tips

• Keep the subnav menu to one screen. Long lists scroll on desktop, which hides items.
• Two or three cards fit the right side comfortably.
• Set the glow colour to something from the brand palette — it sits behind text, so anything saturated hurts legibility.