---
title: "HubSpot Mega Menu Module: Navigator, Free"
description: A free HubSpot mega menu module. Links come from your HubSpot navigation menu, with keyboard support, a mobile drawer and a preset that uses your theme color.
image: https://allgusto.com/hubfs/brand-2026/products/navigator/launch/hero-1600x1200.png
---

[Skip to content](https://allgusto.com/hubspot-apps-and-themes/hubspot-mega-menu#main)

[![All Gusto](https://allgusto.com/hs-fs/hubfs/All%20Gusto%20-%20Logo%20-%20Black%20-%20Transparent-1.png?width=340&height=226)](https://allgusto.com/)

- [Home](https://allgusto.com/)
- [About](https://allgusto.com/about)
- [Apps and Themes](https://allgusto.com/hubspot-apps-and-themes)
- [Blog](https://allgusto.com/blog)
- [Contact](https://allgusto.com/contact-us)

# HubSpot mega menu module

Your site header and your HubSpot navigation menu drift apart, and nobody knows which one is real. Navigator reads every link from the HubSpot menu, so there is only one.

[Get it on HubSpot](https://app.hubspot.com/portal-recommend/l?slug=ecosystem/marketplace/modules/navigator-mega-menu-module-by-all-gusto) [Open the live demo](https://navigator.allgusto.com/navigator-demo) [Read the setup guide](https://navigator.allgusto.com/docs/getting-started) 

![Navigator Mega Menu with the Services mega panel open: two columns of links with icons, descriptions and a New badge, on a demo page for a made-up company.](https://allgusto.com/hs-fs/hubfs/brand-2026/products/navigator/launch/hero-1600x1200.png?width=1600&height=1200&name=hero-1600x1200.png)

When a header keeps its links in a long list of module fields, every change has to be made twice. Navigator Mega Menu is a free HubSpot mega menu module that reads its links from a standard HubSpot navigation menu. You add, rename and reorder links in Settings \> Content \> Navigation Menus, and the header follows on every page without touching the module again. You can see it running on a made-up company's site on the [live demo](https://navigator.allgusto.com/navigator-demo) before you install it.

## Who it is for

I built this module for teams that run their website on HubSpot Content Hub and want a full header, not just a menu: logo, top bar with mega panels, up to two buttons, search and a mobile drawer. It is not tied to a theme. The setup guide covers themes with a drag and drop header, coded themes where you add the module tag to the header partial, themes with a fixed header you hide with a short CSS rule, and templates you build yourself.

## What it does

Pick a menu in the module and the menu's levels become the header. Top-level items sit in the bar. Second-level items become column headings, list items or tabs. Third-level items are the links inside each panel. Every top-level item with children gets a panel automatically, and you can set any one to Mega columns, Tabbed mega, Dropdown or Link only.

Descriptions, icons and badges are added in the module and matched to menu items by label, so your menu stays a plain list of links. A description can run up to 90 characters. Icons come from a built-in set or your own small image, and badges can say New, Beta, Popular or your own word.

![Top: the Frosted Glass preset. Bottom: the Brand Accent preset, with the menu bar taking your theme's primary color. Kettle and Loom is a made-up demo company.](https://allgusto.com/hs-fs/hubfs/brand-2026/products/navigator/launch/07-theme-colour-inheritance.png?width=1600&height=1000&name=07-theme-colour-inheritance.png)

With the Brand Accent preset, the menu bar takes your theme's primary color. Four style presets set every color at once: Clean Light, Dark, Brand Accent and Frosted Glass. Change any single style and only that style moves off the preset.

On phones, below a width you choose, the bar becomes a menu button that opens a full-screen drawer. It shows one level at a time with a Back button, and focus stays in the drawer until you close it. Items that do not fit on desktop move into a More menu.

![The Frosted panel option blurs the page behind the open panel. Kettle and Loom is a made-up demo company.](https://allgusto.com/hs-fs/hubfs/brand-2026/products/navigator/launch/03-frosted-panel.png?width=1600&height=1000&name=03-frosted-panel.png) ![On phones the menu opens as a drawer, one level at a time, with a Back button.](https://allgusto.com/hs-fs/hubfs/brand-2026/products/navigator/launch/04-mobile-390-menu.png?width=1600&height=1000&name=04-mobile-390-menu.png)

## Accessibility and page weight

The header targets WCAG 2.2 AA and is built on the WAI-ARIA disclosure navigation pattern: real buttons that open and close panels, plain lists of links, and no menu roles. You can open, move through and close every panel by keyboard, and Escape puts focus back on the button that opened it. With JavaScript turned off, every link is still in the page and reachable with the Tab key. Automated axe-core checks found 0 violations in 95 scans of the demo, and a screen reader pass ran on the live demo with Orca 48.1 in Chrome on Oct 19, 2026. Automated checks do not catch every issue, so test it with your own content. The [accessibility page](https://navigator.allgusto.com/docs/accessibility) lists what was measured and what has not been tested yet.

The JavaScript is one small file, 12 KB or less gzipped, with no libraries and no jQuery. Icons are inline SVG, so there is no icon font to load. The module loads no files from a CDN or any other outside server; its CSS and JavaScript are served by HubSpot with the rest of your page.

![Every top-level item is a real button with a visible focus ring.](https://allgusto.com/hs-fs/hubfs/brand-2026/products/navigator/launch/05-keyboard-tab-focus-ring.png?width=1600&height=1000&name=05-keyboard-tab-focus-ring.png)

## What it does not do

I would rather you know the limits now than after you have built the header.

- It does not store links of its own. If a link is not in the HubSpot navigation menu you pick, it is not in the header.
- It cannot stop an editor choosing low-contrast colors. The presets were checked for contrast, but a color you change overrides that one color, so keep text at 4.5:1. The one automatic safeguard is the primary button, which picks white or black text for contrast.
- If your theme already has a header, the module does not remove it. You hide the theme's header with the short CSS rule in the setup guide.

## Setup order

| Step | What you do | Why it comes here |
| --- | --- | --- |
| 1 | Build or tidy a navigation menu in Settings \> Content \> Navigation Menus | The header is only as good as the menu it reads |
| 2 | Add the module to your header using the path that matches your theme | Nothing else shows until the module is on the page |
| 3 | Choose your menu in the module's Content tab | Until you do, the editor shows demo content |
| 4 | Pick a preset | A preset sets every color at once, so do it before single styles |
| 5 | Shape panels and add descriptions, icons and badges | These are matched to menu items by label, so the menu must be final |
| 6 | Set buttons, search, scroll behaviour and the mobile breakpoint | Easier to judge with real links and styles in place |
| 7 | Preview at desktop and phone sizes, Tab through the header, then publish | Every item should show a clear focus ring, Enter opens a panel and Escape closes it |

The [setup guide](https://navigator.allgusto.com/docs/getting-started) walks through each step.

## Frequently asked questions

### How does it use my existing HubSpot menu?

You pick a navigation menu in the module. The module reads that menu once per page and turns its first three levels into the bar, the panel headings and the panel links. The module fields hold only extras, such as a description or icon for a link, matched to menu items by label.

### Does it work with my theme?

The setup guide covers drag and drop headers, coded themes, themes with a fixed header and your own templates. With Brand Accent, the menu bar takes your theme's primary color. Try it on the live demo first.

### Will it slow my pages down?

The JavaScript is one file, 12 KB or less gzipped, with no libraries. Icons are inline SVG, and the module loads nothing from a CDN or any outside server.

### Is it accessible?

It targets WCAG 2.2 AA and follows the WAI-ARIA disclosure navigation pattern. Every panel works by keyboard, and every link works with JavaScript off. It is a target, not a certification, so check it with your own content.

### What happens on phones?

Below the breakpoint you choose, the bar becomes a menu button that opens a full-screen drawer, one level at a time with a Back button. Focus stays in the drawer until you close it, then returns to the menu button.

### How does support work?

Support is free, in English, at info@allgusto.com. It comes to me directly, and I reply within one business day.

## Get Navigator Mega Menu

Start with the [live demo](https://navigator.allgusto.com/navigator-demo) to see the panels, the Frosted Glass option and the mobile drawer, then read the [setup guide](https://navigator.allgusto.com/docs/getting-started) before you build the header. Navigator Mega Menu is free on the [HubSpot Marketplace](https://ecosystem.hubspot.com/marketplace/modules/navigator-mega-menu-module-by-all-gusto) and installs straight into your account. All Gusto is a HubSpot Solutions Partner, and I build every product on this page and answer its support email myself. You can also see the [other HubSpot apps and themes I build](https://allgusto.com/hubspot-apps-and-themes).

[Get it on HubSpot](https://app.hubspot.com/portal-recommend/l?slug=ecosystem/marketplace/modules/navigator-mega-menu-module-by-all-gusto) [Open the live demo](https://navigator.allgusto.com/navigator-demo)

© 2026 All Gusto, LLC

- [Home](https://allgusto.com/)
- [About](https://allgusto.com/about)
- [Apps and Themes](https://allgusto.com/hubspot-apps-and-themes)
- [Gatehouse member portal theme](https://allgusto.com/hubspot-apps-and-themes/gatehouse-member-portal)
- [Events Calendar and Agenda module](https://allgusto.com/hubspot-apps-and-themes/events-calendar-and-agenda)
- [Navigator Mega Menu module](https://allgusto.com/hubspot-apps-and-themes/hubspot-mega-menu)
- [Blog](https://allgusto.com/blog)
- [Contact](https://allgusto.com/contact-us)
- [Privacy](https://allgusto.com/privacy)
- [Terms](https://allgusto.com/terms)

```json
{
  "@context" : "https://schema.org",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "description" : "A free HubSpot mega menu module. Links come from your HubSpot navigation menu, with keyboard support, a mobile drawer and a preset that uses your theme color.",
  "image" : "https://allgusto.com/hubfs/brand-2026/products/navigator/launch/hero-1600x1200.png",
  "installUrl" : "https://app.hubspot.com/portal-recommend/l?slug=ecosystem/marketplace/modules/navigator-mega-menu-module-by-all-gusto",
  "name" : "Navigator Mega Menu",
  "offers" : {
    "@type" : "Offer",
    "availability" : "https://schema.org/InStock",
    "price" : "0",
    "priceCurrency" : "USD",
    "url" : "https://app.hubspot.com/portal-recommend/l?slug=ecosystem/marketplace/modules/navigator-mega-menu-module-by-all-gusto"
  },
  "operatingSystem" : "HubSpot CMS",
  "publisher" : {
    "@type" : "Organization",
    "name" : "All Gusto",
    "url" : "https://allgusto.com/"
  },
  "url" : "https://allgusto.com/hubspot-apps-and-themes/hubspot-mega-menu"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "FAQPage",
  "mainEntity" : [ {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "You pick a navigation menu in the module. The module reads that menu once per page and turns its first three levels into the bar, the panel headings and the panel links. The module fields hold only extras, such as a description or icon for a link, matched to menu items by label."
    },
    "name" : "How does it use my existing HubSpot menu?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "The setup guide covers drag and drop headers, coded themes, themes with a fixed header and your own templates. With Brand Accent, the menu bar takes your theme's primary color. Try it on the live demo first."
    },
    "name" : "Does it work with my theme?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "The JavaScript is one file, 12 KB or less gzipped, with no libraries. Icons are inline SVG, and the module loads nothing from a CDN or any outside server."
    },
    "name" : "Will it slow my pages down?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "It targets WCAG 2.2 AA and follows the WAI-ARIA disclosure navigation pattern. Every panel works by keyboard, and every link works with JavaScript off. It is a target, not a certification, so check it with your own content."
    },
    "name" : "Is it accessible?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "Below the breakpoint you choose, the bar becomes a menu button that opens a full-screen drawer, one level at a time with a Back button. Focus stays in the drawer until you close it, then returns to the menu button."
    },
    "name" : "What happens on phones?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "Support is free, in English, at info@allgusto.com. It comes to me directly, and I reply within one business day."
    },
    "name" : "How does support work?"
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BreadcrumbList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : "https://allgusto.com/",
    "name" : "Home",
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : "https://allgusto.com/hubspot-apps-and-themes",
    "name" : "Apps and Themes",
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : "https://allgusto.com/hubspot-apps-and-themes/hubspot-mega-menu",
    "name" : "Navigator Mega Menu",
    "position" : 3
  } ]
}
```