Dynamic Mega Menus

Compose

11 Sept

Create dynamic mega menus that pull in content from other pages, product collections, or sections across your Squarespace site. Use them to build richer navigation experiences with live content, images, links, categories, and product information that stays connected to the rest of your site.

Use Compose to describe what you want to pull into your Mega Menu.

Option 1 Setup: Drop down links with images

Add a Dropdown Folder to to your Main Navigation of your site.
Add Links to your Dropdown folder.
Add Images from your asset Library with Compose’s context “+”
Use the below prompt and also describe which image goes with which link.

Starting Prompt

Use the items in this dropdown as items in a center aligned new mega menu. Hide the existing dropdown and remove the nav background color. Each item in the nav dropdown should create a grid of columns. 4 columns, vertically aligned. Each item should have a thumbnail that goes with the item link. Create a zoom hover on the image, and fade slightly the other creating a focus on the item hovered on. add the titles grouped thumbnail together. Thumbnail above the titles. Below are the title that should align with the correct image.

Option 2 Setup: Pull in Section from another page

Add a hidden page with the url /mega-menu
Add a section to your page that you want to be your mega menu
Add this section as context to your Compose prompt.
Add the Folder to your navigation as context to your Compose prompt.
Give your URL mega menu url slug
Give you other links to the drop down folder, these will be used on mobile overlay menu.
Create the prompt while on the /mega-menu page.
Use the starting prompt below, and change what you would like.

Starting Prompt

Build a mega menu for the links in the header nav that contain  href="/mega-menu"), pulling live content from the page /mega-menu.
Prefetch /mega-menu on page load, parse once, cache the result. Get the section and use this content as the mega menu and replace the dropdown with this section. Slide it down when hovering on the link.
If that response has no usable section, retry /mega-menu?format=main-content.
Ignore anything inside #header or the footer.
Fallbacks in order: the section's data-section-id, then the first .page-section in the document.
Append the panel to body, not inside #header, so header CSS can't bleed in or swallow clicks. Pin it flush to the bottom edge of the header and keep it pinned on scroll/resize.
The cloned section is the entire visible surface — no padding, gutters or white edges around it. Its own section background should reach every edge.
Slide down from behind the header on hover of the nav item, slide up on hover off. Small close delay so moving the mouse from link to panel doesn't kill it.
Only hide the native folder dropdown once a section is genuinely in the panel. If the fetch fails, leave native behaviour completely alone.
The nav link button navigates to its data-href on click, since the native dropdown is gone.
Styling on other pages keep the same, font, colors, etc.
Copy every inline <style> from the fetched page into the panel, deduped.
Add any <link rel="stylesheet"> the current page doesn't already have.
Rewrite #collection-<id> rules to a class on the panel so page-scoped CSS still matches off-page.
Carry the fetched <html> and <body> inline custom properties onto the panel so tweak variables resolve.
Notes: Desktop only, leave the mobile nav alone.
Adopted CSS isn't sandboxed, so a very global page rule could leak — keep both adoption steps behind flags that can be switched off.

Option 3 Setup: Dynamic Store Products

Create a Store.
Make sure there are products in the store with images and titles.
Use Compose to select the Store in the nav
Use the starting prompt below.

Starting Prompt

I want to build a dynamic mega menu based off the product on my site.  Fetch all product from this link,  get the product, make beautiful modern mega menu that slides down.  Add a down cheveron to the right of store. when I hover on store, slide down a mega menu and slide up when not on the mega menu or link.  
The links should be dynamically pulled on page load from the store.  Make list of links for each product and put them in columns in a grid and make them responsive.