Mega Menu 2 Pro for HubSpot

Getting Started

Mega Menu 2 Pro is a standalone HubSpot module — no theme required. Drop it into the top of any page template, or add it to your header global partial so it loads site-wide.

Installation

1. After purchase, the module appears in your Design Manager under marketplace-modules/Mega Menu 2 Pro.module.
2. Open any page template in the Design Manager or Page Editor.
3. Drag Mega Menu 2 Pro from the module list into the very top of your page.
4. To make it appear on every page, add it to a global partial (typically your header partial) so it loads automatically across your site.

Menu Items

Each item has a single type field with two choices: Simple link (no sub-items) or Expandable panel (sub-items + optional preview).

Simple link

Renders as a clickable label in the drawer. Useful for top-level pages like Pricing, Contact, or Login.

Expandable panel

Opens an accordion inside the drawer revealing:

• Sub-items — label, optional description, and link. Up to 12 per panel.
• Preview image — optional. Renders as a 16:10 hero above the sub-items.
• Preview caption — short copy below the image.
• Preview CTA — a small "→" link to a category overview page.

Drawer Settings

Side

Choose whether the drawer slides in from the left or right. Defaults to right.

Width

Four options: 480px (narrow), 560px (default), 720px (wide), or fullscreen. On mobile the drawer always fills the viewport.

Search

Optional search input at the top of the drawer. Filters menu items as the user types — a fast in-drawer client-side filter, no extra config needed.

Language switcher

Toggleable. When enabled, uses HubSpot's native {% language_switcher %} tag and only renders when the current page has translations configured in HubSpot.

Drawer Footer

Renders three optional sections, in order:

• CTAs — up to 2 buttons. Primary (filled) or Ghost (outlined) style.
• Social icons — uses HubSpot's icon field (Font Awesome 5). Each icon links to a URL.
• Language switcher — see above.

Style System

All styling is grouped under the Style tab.

Colors

Navbar background and text, drawer background, drawer text, muted (descriptions), accent (active states, hover), and border / divider — all customizable.

Backdrop

Color, opacity (0–1), and blur strength (0–20px). Combines to give the dim-plus-blur effect behind the open drawer.

Typography

Pick any Google Font (or system font) for the whole module. Adjust the menu item size and sub-item size independently.

Animation

Two timings: the drawer slide-in duration (default 480ms) and the panel expand duration (default 320ms). Uses an Apple-style easing curve for a polished feel.

Accessibility

• Drawer uses role="dialog" with aria-modal="true".
• Trigger button exposes aria-expanded and aria-controls.
• Focus moves into the drawer on open, returns to the trigger on close.
• Tab key cycles focus inside the drawer (focus trap).
• Escape closes. Clicking the backdrop closes. Clicking a leaf link closes after navigation.
• Body scroll is locked while the drawer is open.
• Honors prefers-reduced-motion: reduce.

Mobile Behavior

Below 768px the drawer always becomes fullscreen, items shrink to a comfortable mobile size, and padding tightens. No separate mobile menu module is needed — the drawer IS the mobile menu.

Tech

Pure CSS and vanilla JavaScript. No GSAP, no Swiper, no external dependencies. Drop it in and ship.