Setup

How to import the header template, position it correctly in your layout, and optionally add prebuilt mega menu dropdown patterns using the provided JSON files.

1. Import Template

First, import the header and make sure it appears in the correct position in your template.

1. Open your header.json file in a text editor or IDE and copy its entire contents.

2. In Etch, open your index template:

   • Navigate to any page

   • In the left-hand sidebar, go to the Template Manager

   • Find your index template and click Edit

3. Paste the JSON into the template and make sure the <header> is placed above the <main> element.

2. (Optional) Import Dropdown Patterns

Along with the template files, you will see a folder named ‎Dropdown Patterns. Inside this folder, you will find several pre-built mega menu dropdown patterns that you can use as a starting point. You can import these patterns into the slots of the Menu Dropdown components.

1. Open the header layers. Inside the Menu Wrapper component, locate the two menu dropdown components and find the one labeled Mega Menu.

2. Open the Dropdown Patterns folder and copy the contents of one of the .json files.

3. Paste the contents into the slot of the Menu Dropdown component.

4. Remove the existing placeholder layer from that dropdown.

4. Why isn't the header a component?

You might notice that the header is not set up as a component. This is intentional.

At the moment of release of the menu builder, etch does not support editing components inside of components.

The recommended approach is to fully build and finalize your header first. Once you are happy with it, convert it into a component so you can reuse it across templates.

5. Getting started with customization

There are five key elements that make up the menu builder. Each one has its own options to help you build menus more quickly. You can see a full list of options and what they do on the Component Options page.

For now, you will get a high-level overview of what each element does and how its styling works.

1. Header

This is the header you will use across your entire site. The ‎<header> element uses a ‎.header-wrapper class, and the container inside it uses a ‎.header class.

Treat ‎.header-wrapper as an invisible outer container. All styling should be applied to the .header element. This separation gives you room for sticky header animations, mobile animations, and behavior without breaking mobile interactions or any dropdown interactions that follow.

It is helpful to think of ‎.header-wrapper as the outer shell and ‎.header as the actual site header.

Want to change the background color of your header? Make that change on ‎.header.

Want to add ‎backdrop-filter: blur(20px);? Add that to ‎.header as well.

Adding Custom CSS styling to elements on desktop and mobile.

If you want to make mobile-specific or desktop-specific CSS changes, this is the component you will edit. The CSS inside is broken out and commented so you can quickly find and adjust the styles you need. You will also find many variables already written out to help you get things styled quicker.

Custom CSS Tip

at the top right of the CSS editor panel, you will find a hamburger icon which will open a menu for navigating all of the comments inside the CSS. this will make it easier to navigate.

More information on header options here:

Header (Element)

2. Menu Wrapper

Think of the Menu Wrapper as your entire navigation system for both mobile and desktop. This element holds the custom CSS that controls how your menu behaves and looks at different breakpoints. You will find most of the custom CSS for the menu here.

To edit the CSS for the Menu Wrapper, right click on the component and click "Edit Component". The Menu Wrapper is responsible for:

• Handling the breakpoint where your layout changes between mobile and desktop

• Switching classes from ‎.mobile to ‎.desktop (and back) based on that breakpoint

• Switching behavior of dropdowns on mobile

• Switching navigation modes such as a reveal mode or stacked mode on mobile devices

More information on Menu Wrapper options here:

Menu Wrapper (Component)

3. Menu Dropdown

The Menu Dropdown is the element you use when you want navigation items to reveal additional content, such as submenus or mega menus.

You can think of it as a container that:

• Holds the content that appears when a user hovers or clicks on a menu item

• Connects to the Menu Wrapper so it behaves correctly at different breakpoints

• Works with the provided dropdown patterns so you can plug in complex layouts with minimal setup

Use this element any time you need a menu item to open a panel, grid of links, or richer content instead of just linking directly to a page.

More information on Menu Dropdown options here:

Menu Dropdown (Component)

4. Menu Link

This is a very simple element that is a link wrapped in an LI element. Makes it easy to place into your navigation and dropdown's without the added layers.

More information on Menu Link options here:

Menu Link (Component)

5. Toggle

The toggle is responsible for opening and closing the menu. It comes with multiple options such as alternating labels or animated hamburger icons.

More information on Toggle options here:

Toggle (Component)