The mega menu
built for agencies

Why an agency-specific mega menu?

Generic mega menus can be shoe-horned into agency shapes — but they cost weeks of configuration and miss the affordances buyers expect on SmartBug, New Breed, Aptitude 8, Huble, Vye, and the studios featured in HubSpot's Inspire gallery. Agency Mega Menu Pro ships agency-native features that no generic mega menu has out of the box: image-forward Services panel, tabbed Industries column, featured case-study cards, client-logos grid, embedded brief form, and a multi-office Locations switcher.

Getting started

Agency Mega Menu 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 Design Manager under marketplace-modules/Mega Menu 4 Pro.module.
2. Open any page template in the Design Manager or Page Editor.
3. Drag Agency Mega Menu Pro from the module list into the top of your page.
4. To make it appear on every page, add it to your header global partial so it loads automatically across the site.

Adding menu items

In the module's Content tab, you'll find the Menu Items repeater. Each item has a Type field with three options:

• Link — A simple navigation link, no dropdown. Use for Contact.
• Dropdown — A single-column panel with a list of items. Each item has an icon, image, description, badge, and a link. Use for the Locations switcher.
• Mega — A full-bleed multi-column panel with optional sidebar (featured cards / promo / embedded form / video / product carousel). Use for Services / Industries / Work / Insights / About.

Mega item types in detail

Image-forward Services panel

Three capability columns (Strategy & Brand · Web & Product · Growth & RevOps). For each item, upload a 1:1 Image instead of choosing an icon — Agency Mega Menu Pro automatically renders these items as blog cards (image on top, title, italic subtitle), not the standard icon row. Reads like a portfolio grid.

"Industries we serve" tabbed panel

Set Menu item → Layout mode = Tabs. Each mega column becomes a tab labelled with the column title (B2B SaaS / Healthtech / Fintech / Professional Services). Inside each tab, list 4–8 sub-niches with icons and descriptions. Choose Tab trigger = Hover for instant feedback or Click for touch-heavy audiences.

Work panel (client logos + featured case study)

Two strategies that ship together:

• Set one column's Column layout = Integration logos grid and upload your client logos as the column items. The 3-column grid is repurposed from the integrations layout — here it's a portfolio signal, not a tech-stack flex.
• Enable Featured Content (Sidebar) on the same item and add 1–2 case-study cards (image + tag + outcome headline). The sidebar pins these to the right of the panel.

Insights panel (changelog journal)

Set Column layout = Changelog teaser on a single-column mega item. Each item renders as a version pill (mono font), date badge, and 2-line description — perfect for issue-style content marketing (Vol. 14 / May 14 / "Why the editorial-site era is back…").

About panel (team / careers + brief form)

Pair a 2-column mega item (Studio + Join Us) with an Embedded Form (Sidebar) pinned on the right. The form takes a HubSpot form ID, an inline title and description, and a custom submit-button label. Lets prospects raise their hand directly from the nav.

---

Promo banner

A full-width strip above the navbar with a customizable message, link, and dismiss button. The leading dot has a pulsing rust ripple animation that draws the eye without being noisy; ripple colour matches the link accent automatically. Dismissals are remembered in localStorage — bump the storage key field to re-show after a campaign refresh.

• Enable — Toggle the strip on or off.
• Text / Link text / Link URL — Message body, inline link text, and target URL.
• Dismissible — Show or hide the × close button.
• Storage key — Key used in localStorage. Change it to force the banner to re-appear for everyone.
• Background / Text / Accent colors — Three colour pickers. The default is ink #1a1614 + cream text + rust-coral #c8553d for the link. The accent color also drives the ripple animation around the leading dot.
• Ripple animation — Two staggered expanding rings, 2.4s loop, honors prefers-reduced-motion (disabled for users who opt out of motion).

Trust bar

Anchor your agency credentials (HubSpot Diamond Partner, Inc. 5000, Clutch, Webby, AAAA…) at the bottom of every mega panel. Buyers actively look for these signals — surfacing them in nav saves a click into the about page.

• Enable — Show or hide the bar across all mega panels.
• Heading — Short eyebrow text (default: Trusted by 200+ brands).
• Badges — Repeater of label + icon (FontAwesome 5). Add 3–6 credentials.

Search

Toggle under Content → Search. When enabled, a search icon appears in the action bar. Clicking it reveals an inline field with HubSpot's built-in search suggestions.

⌘K / Ctrl-K shortcut

Tap ⌘K (or Ctrl-K on Windows / Linux) anywhere on the page to open the navbar search. A visible ⌘K hint inside the search trigger advertises the shortcut. Only active when Search is enabled. Toggle under Agency behavior → Enable ⌘K shortcut.

CTAs

Add up to 3 buttons under Content → CTAs. The demo ships with Schedule a call (secondary outline) + View work (primary ink). Each button has text, URL, style (primary / secondary / ghost), and optional modal trigger.

---

Style system

Every visual property is controlled from the Style tab — no CSS editing needed. The agency palette is wired in by default; change any value to re-skin.

Global

Base values that cascade through the entire module:

• Font — Body font for menu links, dropdown items, mega panels, mobile panel, forms. Defaults to Inter Tight from Google Fonts. Auto-loaded via HubSpot's font field (no external require_css).
• Editorial accent font — Serif used on column titles, sidebar titles, trust-bar heading, featured-card tags, changelog dates, and image-card subtitles. Defaults to Fraunces from Google Fonts. Swap to any Google or system font; entire serif layer re-skins.
• Colors — Heading #1a1614, text #4a3f3a, muted #8a7d76, body bg #f5f1ec (warm cream), cards bg #fbf8f4, border #1a1614 @ 12% (opacity included).
• Notification badge text color — Color of the count text inside a menu-item notification dot. Default #fff.
• Transparent-mode icon color — Color of search/language icons when the bar is in transparent-on-hero mode (before scroll). Default #fff.
• Sidebar video poster bg — Background behind a sidebar video before it loads. Default #000.
• Font sizes — XS, SM, Base — all other sizes derive from these.
• Spacing unit — Base spacing in px (default 4). Generates the full --space-xs → --space-3xl scale.
• Border radius — Base radius. Set to 0 for the squared editorial feel; raise to 8–12 for softer corners.
• Shadow opacity / Transition speed / Letter spacing / Blur strength / Opacity (muted, hover) — Animation, depth, and subtle-state tuning.

Accent

The module's accent color — used on column titles, hover indicators, icons, link underlines, and badges. Default is rust-coral #c8553d with hover #a8442f and a 14%-opacity light tint. Replace with your brand colour and the entire mega menu re-skins instantly.

Nav bar

Controls the top bar:

• Background type — Light, Dark, Transparent, Custom Color, Gradient, or Background Image. The demo uses Custom #fbf8f4 at 92% opacity.
• Blur background — Enable frosted-glass when the bar background has reduced opacity.
• Text colour / Hover colour — Direct pickers. The demo uses ink #1a1614 with a rust hover.
• Width — Container, Full, or Compact. The demo uses Full with the bar content centered to 1280px.
• Border, Radius, Shadow, Padding — Full geometry control.

Menu links

Top-level menu items: text colour, hover text, hover background, active indicator colour, font size, font weight, padding, and border radius. The demo uses Inter Tight 500 at 14px with a rust hover and no radius for the editorial squared look.

Dropdown panel

The panel container (used by both dropdowns and mega panels): background colour (with opacity for glass effects), border, radius, shadow, padding, and gap between items.

Dropdown items

Style individual rows inside dropdowns and mega columns: text colour, description colour, hover bg, hover text, icon colour, icon size (default 18px), image radius, vertical/horizontal padding, and border radius. Icons inherit the icon colour and size — the demo uses rust-coral icons at 18px.

Mega menu

Column-specific settings: column gap (32px default), column title colour (rust-coral by default), font size (12px), font weight (500), and text transform (uppercase). Combine with the Fraunces serif inherited from the editorial layer for a magazine-style column eyebrow.

Sidebar / Featured

Style the right-rail content: background colour, border radius, featured-image radius, tag colour, and tag background. Drives the look of case-study cards and the embedded brief form.

Badges

Small labels next to menu items or column items (Diamond, Hiring, Free, New, Beta, AI): background, text colour, font size, border radius, vertical/horizontal padding. Five built-in style presets: default, new (green), beta (purple), soon (orange), ai (animated gradient + sparkle).

Buttons (CTAs)

Three variants for top-bar CTAs and panel CTAs:

• Primary — Solid background, full colour control including hover states.
• Secondary — Outlined/transparent with border, hover background.
• Ghost — Text-only with hover tint.

All share font size, font weight, padding, border radius, border width. The demo uses ink-on-cream primaries that flip to rust on hover.

Forms (sidebar + mobile embedded HubSpot form)

The "Send brief" form pinned in the About panel sidebar — and the same form rendered inside the mobile accordion — share one style group under Agency Polish → Form style:

• Labels — size, color, weight, letter-spacing, uppercase on/off.
• Inputs — vertical + horizontal padding, font size, border radius, background color (with opacity), border color (with opacity), focus border color, focus ring color + opacity.
• Submit button — background, text color, hover background, vertical + horizontal padding, font size, font weight, border radius.
• Success state — border color for the post-submit confirmation message.
• Font family — inherits from Global → Font, so labels, inputs, and the submit button all use the body font automatically.

Every form value cascades to both the desktop sidebar form and the mobile-accordion form — no per-context duplication.

Agency Polish (glass · icons · hover · badges · sidebar · form · trust bar · promo banner)

One unified group for the agency-specific polish layer. Every value is editor-controllable:

• Glass — Navbar — bg color (with opacity), border color, blur strength, saturate amount.
• Glass — Dropdown — bg color (with opacity), border color, blur strength, saturate amount.
• Icons — hover color (the rust tint on hover), icon transition speed.
• Hover — dropdown item hover bg color + opacity, hover text color.
• Badges — sizing, padding, radius. Five built-in style presets (default / new / beta / soon / ai).
• Sidebar column — width (rem), padding (rem), background, border.
• Form style — see the Forms section above.
• Trust bar — heading size + color, label size + color, gap between items, padding, background, top border.
• Promo banner — radius, padding, font size, shadow.

---

Column layouts

Inside any mega column, set Column layout to switch the rendering mode:

• List (default) — Icon (or image) + title + description rows. When items carry an image, they automatically render as image-on-top blog cards.
• Changelog teaser — Version pill (mono) + date badge + 2-line description. Perfect for the Insights journal column.
• Integration logos grid — 3×N grid of logo cells with name labels. Used in the demo's Work panel as a client-logos grid.

Mobile behavior

Below your tablet breakpoint (default 1024px), the navbar collapses into a mobile layout:

• Logo left, hamburger right — Always, regardless of desktop logo position.
• Card-style panel — The mobile panel auto-sizes to its content with a max-height cap, then scrolls internally. It never stretches full-height on load.
• Accordion items — Top-level items with dropdowns become collapsible accordions on tap.
• Featured cards on mobile — Render as image-on-top blog cards (16:9 image + italic serif tag + title). Different from the desktop sidebar but uses the same data fields.
• Embedded form on mobile — Title, description, inputs, and submit button all align to the same horizontal padding as the menu items so the form reads as part of the accordion, not a separate card.
• Body scroll lock — When the mobile panel is open, overflow-hidden is applied to both html and body so background scroll is fully locked (iOS Safari included).
• CTA buttons — Pinned at the bottom of the mobile panel.

Animation

Set under Settings → Dropdown animation:

• Morph (default) — The dropdown wrapper smoothly morphs its size and position as you hover between menu items. Heights are measured live on each hover so the wrapper always matches the active panel exactly.
• Fade — Simple fade in/out for each panel.
• Slide — Subtle slide-down on open.
• Scale — Soft scale-up entrance.

Sticky scroll behavior

When sticky navigation is enabled (Settings → Sticky navigation), two extra options become available:

• Shrink on scroll — Padding reduces by 50% and the logo scales to 75% once the page scrolls past 50px.
• Transparent on top — The nav starts fully transparent (no background / shadow / border) over hero imagery and transitions to its configured solid style on scroll.

Both can be combined — start transparent and shrink on the same scroll event.

Keyboard navigation

Full WCAG-friendly keyboard support:

• Tab — Move focus across menu items.
• Arrow Left / Right — Move between top-level items. Items with dropdowns open on focus.
• Arrow Down — Open the focused dropdown and move focus to the first link. Inside a panel, moves to the next link.
• Arrow Up — Move to the previous link; returns to the parent on first item.
• Escape — Close the open panel and return focus to the parent item.
• ⌘K / Ctrl-K — Open the search panel from anywhere on the page.

ARIA attributes (role="menubar", role="menu", aria-expanded, aria-haspopup, aria-hidden) are included for screen readers.

Click-to-open mode

Under Settings → Open dropdown on, switch to Click:

• Hovering items will not open dropdowns.
• Click toggles open/closed.
• Clicking outside closes the panel.
• Keyboard navigation works identically in both modes.

Recommended for touch-heavy audiences and pages where mega panels contain interactive content (forms).

Icons

Both dropdown and mega items support an optional Icon. Icons render as inline SVGs from HubSpot's built-in FontAwesome 5.0.10 set.

• Pick "Solid" for filled icons, "Regular" for outlined.
• Some icon names that look like FA5 are not in the 5.0.10 set bundled with HubSpot (e.g. award, palette, drafting-compass, microphone-alt, user-tie, globe-europe, layer-group). Safe substitutes: gem, paint-brush, compass, microphone, user, globe, cubes.
• Items without icons align cleanly alongside items that have them — mix and match freely.

---

Tips for agencies

• Lead with portfolio — Use real client launch images in the Services panel. Prospects buy on visual confidence; logos and icons read as generic.
• Tab your industries — A flat list of 12 verticals reads as scattered. Grouped under 4 tabs reads as specialised.
• One case study per panel — Resist filling every sidebar. A single featured card with a real outcome ("4× organic leads") converts better than three competing thumbnails.
• Pin the brief form on About — Most agency sites bury "Contact" three clicks away. Pin a HubSpot form inside the About panel and you'll get hand-raisers from the navbar itself.
• Two CTAs, not five — Schedule + View work covers 90% of agency funnels. Add a Locations dropdown if you're a multi-office firm; skip it if you're remote-only.
• Bump the storage key after re-pitching — Change agencymm_promo_v1 → agencymm_promo_v2 whenever you ship a new promo banner. Old dismissals reset; new audiences see it.
• Don't over-style — The Agency Polish group lets you tune ~30 micro-details, but the default editorial palette + Fraunces serif + Inter Tight pairing is the heaviest lift. Most agencies only need to swap the accent colour.

Tech

Pure CSS and vanilla JavaScript. No GSAP, no Swiper, no external dependencies. Same architecture as Mega Menu Pro — battle-tested, SEO-friendly, performant.

• Live height measurement — On every hover, the mega panel height is measured with getBoundingClientRect() on the visible content (not scrollHeight, which is inflated by hidden iframe overflow inside HubSpot form embeds). The wrapper is then sized to exactly that height + the trust bar height when the trust bar is visible.
• Single source of truth — Only the hover handler (showDropdown) writes wrapper.style.height. The auto-resize observer that previously raced against the hover handler was removed; form embeds that grow async will pick up the new height on the next hover.
• Trust bar visibility — Hidden for dropdown panels (e.g. Locations), shown for mega panels. The height calc respects this — no phantom 50px fallback when the bar is hidden.
• Font loading — Both fonts (body + editorial) are HubSpot font fields with load_external_fonts: true, so the Google Fonts <link> is injected automatically. No require_css calls hardcoded in the template.
• Zero hardcoded design tokens — Every color, font, padding, radius, shadow, blur, opacity, hover state, and focus state used for primary design surfaces is wired to a style.* field. Decorative micro-spacing (1–8px gaps inside compound widgets, the notification dot's 6px size, etc.) is the only set of constants that remain.