How to make a menu responsive in EtchWP, with burger menu and dropdown

On the next tutorial you willl learn how to do a Menu Navigation responsive, with Etchwp, and see how to do to adapt from Desktop to mobile version.

Get etchwp

Download the template ready to use

Header responsive template

Receive to you’re email the code JSON

Mastering Your Website Header with Edge Components: A Step-by-Step Guide

---

Creating a functional and visually appealing website header is crucial for user experience. In this guide, we’ll walk you through building a responsive header using Edge components, complete with a mobile version and a Burger Menu. This tutorial is based on a pre-alpha version of Edge, so while the core concepts remain, some specific steps may evolve as the platform matures.

Ready to take your web development skills to the next level? Let’s dive in!

This tutorial it’s based on the next documentation, to do a deep work, and have a better understanding and implementation, follow the official docs of etch.

Understanding the Core Concepts

Edge components work differently than traditional WordPress templates. They are self-contained units that can be reused across your site. For this header, we will leverage four main parts:

• HTML: The basic structure of your header.
• CSS: The styles that bring your header to life.
• JavaScript: The functionality, especially for the dropdown menus and mobile trigger.
• JSON: The data that populates your navigation.

The Burger Trigger for the mobile version has its own distinct HTML, CSS, and JavaScript. We’ll cover each of these elements in detail.

Step 1: Setting up the Header Template

To begin, you need to create a Catch-All template. This is the master template that will wrap your entire website, much like index.php in the standard WordPress template hierarchy.

1. Navigate to your Template section.
2. Create a new template and name it Catch-All.
3. Add a Section to the template and change its HTML tag to <header>. This is essential for proper semantic structure.

Step 2: Adding the Logo and Converting to a Component

Your logo is the cornerstone of your brand identity. Let’s add it and prepare the header for component-based development.

1. Insert an SVG for your logo into the header section.
2. Once your logo is in place, you need to convert your entire header into an Edge component.
3. Inside your header, add a Content Slot named right. This slot will serve as a container for the navigation menu on the right side of your header.

Step 3: Building the Navigation Menu

The navigation menu is a component nested within the main header component.

1. Inside the right slot, add a Flex Div.
2. Copy the provided navigation HTML into this element. This will pre-populate the basic structure.
3. Select the nav-menu in the structure panel and add the corresponding CSS and JavaScript from the tutorial. The JavaScript is what enables the dropdown functionality.
4. Right-click the navigation element and create a new component. Name it something descriptive like BasicNav (or another name like Navigation or Primary Navigation).
5. Add a Loop Property named BasicNav. This name must match exactly as it’s what the HTML will look for.
6. Add a Text Property for accessibility, name it navAreaLabel, and set a value like Primary Navigation.

Step 4: Implementing the Mobile Burger Menu

The mobile menu is a separate component that sits inside the right slot alongside the BasicNav.

1. Copy the provided Burger Menu HTML.
2. Paste it into the right slot.
3. Add the corresponding CSS to the burger class.
4. Paste the JavaScript to enable the mobile toggle functionality.
5. Right-click on the element and create a new component, naming it BurgerMobile.
6. Add a Text Property for accessibility, like ariaLabel, and give it a value such as Open mobile menu.

Step 5: Configuring the Navigation with JSON

Now that the components are in place, you need to define your menu links using a JSON configuration.

1. Go to the Loop Manager tab.
2. Select the BasicNav loop.
3. Edit the JSON to set up your navigation structure. You can include child elements to create dropdown menus.

Here’s an example of what your JSON could look like:

JSON

[
  {
    "label": "Home",
    "url": "/"
  },
  {
    "label": "Item 2",
    "children": [
      {
        "label": "Item 2.1",
        "url": "/dropdown1"
      },
      {
        "label": "Item 2.2",
        "url": "/dropdown2",
        "children": [
          {
            "label": "Item 2.2.1",
            "url": "/dropdown1"
          },
          {
            "label": "Item 2.2.2",
            "url": "/dropdown2"
          },
          {
            "label": "Item 2.2.3",
            "url": "/dropdown3"
          }
        ]
      },
      {
        "label": "Item 2.3",
        "url": "/dropdown3"
      }
    ]
  },
  {
    "label": "Item 3",
    "url": "/page",
    "children": [
      {
        "label": "Item 3.1",
        "url": "/dropdown1"
      },
      {
        "label": "Item 3.2",
        "url": "/dropdown2"
      },
      {
        "label": "Item 3.3",
        "url": "/dropdown3"
      },
      {
        "label": "Item 3.4",
        "url": "/dropdown4"
      }
    ]
  },
  {
    "label": "Item 4",
    "url": "/about"
  },
  {
    "label": "Item 5",
    "url": "/contact-us"
  }
]

Step 6: Final Styling and Review

With everything set up, you can now focus on the aesthetics.

1. Return to the nav-menu and its children.
2. All the elements are set as variables, allowing you to easily customize the styles without altering the core structure.
3. Save all your components and templates.

Pro-tip: Go to the front end of your site and test both the desktop and mobile versions to ensure everything is working as expected. You should see your full navigation on desktop and a functional burger menu on mobile.

---

This guide provides a solid foundation for creating a dynamic, component-based header in Edge. By following these steps, you’ll be able to build a header that is not only robust and responsive but also easy to manage and update.

What other Edge tutorials would you like to see? Let us know in the comments below!