All Components

Etch Menu Builder

Navigation that ships accessible by default.

Build simple dropdowns, nested menus, or full mega menus for Etch in a fraction of the time. Five components, four ready-made patterns, zero dependencies.

$45one time, unlimited sites
Preview Menus
14 day money back guarantee
Demo site built with Etch Menu Builder, showing the Lyra mega menu open under the navigation bar

Skip the blank canvas.

Ships with four pre-designed mega menu dropdown patterns. Built with Etch and ACSS. Drop one in, swap the content, and move on to the next page.

4patterns included

Build Responsive Menus

Change one component prop and the menu switches seamlessly between desktop and mobile layouts with a single component prop. No media queries required.

Mobile

Two mobile menus. Two dropdown styles.

Pick an off-canvas menu that slides in from the side, or a header-attached menu that reveals below the navigation. Inside either one, nested links open as stacked cards or as a classic accordion.

  • Mobile mode

    Off-canvas

    Slides in from the edge over the page.

  • Mobile mode

    Header attached

    Reveals below the navigation bar.

  • Dropdown mode

    Stacked cards

    Submenus slide up as a new card.

  • Dropdown mode

    Accordion

    Submenus expand in place.

Swipe to browse

Accessible out of the box.

Keyboard focus, ARIA labels, focus trapping, Escape handling, and skip links are baked in. Your menus ship accessible by default, and you never have to bolt it on afterward.

  • Esc

    Closes the open dropdown and returns focus to its trigger

  • Tab

    Moves through top-level items and into any open submenu

  • Shift+Tab

    Walks back the same way, no dead ends

  • Skip link

    Lets keyboard users jump past the whole menu to content

  • Screen reader

    Every dropdown announces its name and expanded state

Release Preview Video

The release preview walks through how to use it and what’s included.

Changelog

What people who bought it say

Anything built by Nick always equals quality. I’ve made his menu builder foundational in our agency’s stack.

Mike Brinson

Today I bought Nick’s Etch Menu Builder. It feels really smooth to work with. The instructions are clear and the video is very helpful.

Cees Coenen

I was under pressure to deliver a client project, Menu Builder arrived in the Nick of time!

Ron Amick

My only concern with using Etch was building the menu, but Nick’s Menu Builder helped me overcome that fear.

Loïc Delahais

Shoutout to Nick for the totally awesome/brilliant drawers and mega menu. Both worked beautifully in the project and the drawers have proven to be a really great feature.

Rob Pearce

What lands in your download

A complete Etch-ready menu system

Built around ACSS, so it picks up your colors, spacing, and type the moment you import it.

Five flexible components

Header, Menu Wrapper, Menu Dropdown, Menu Link, and Toggle, each with its own props.

Zero dependencies

The JavaScript lives inside each component, so you can read it and edit it without hunting for a bundle.

Four mega menu patterns

Pre-designed dropdown layouts to kick start a project and ship with more polish.

Custom events at every transition

Hook your own logic into open, close, and submenu changes without touching the source.

Full documentation

Online at docs.nickarce.com, with a walkthrough video for the whole setup.

Questions people ask before buying

Is there documentation available?
Yes. Full documentation is included at docs.nickarce.com, and it covers every component and prop.
Are there any JS dependencies?
Zero dependencies. The JavaScript lives individually inside each component for easy editing, and components dispatch custom events at state transitions.
Are there any external CSS files?
No additional CSS files needed. The entire system comes inside one header.json file for easy import.
Etch Menu Builder
Etch Menu Builder$45