SaaS Mega Menu Pro for HubSpot

Why a SaaS-specific mega menu?

Generic mega menus can be shoe-horned into B2B SaaS shapes — but they cost you weeks of configuration and miss the affordances buyers expect on Linear, Notion, Stripe, Webflow, Vercel and HubSpot. SaaS Mega Menu Pro ships with seven SaaS-native features that no generic mega menu has out of the box.

What's different from the regular Mega Menu Pro

Everything in regular Mega Menu Pro is here. Plus, all of the following are first-class, fully editor-configurable, and visible in the live demo above:

1. ⌘K / Ctrl-K search 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 in module settings. Toggle on/off in SaaS behavior → Enable ⌘K shortcut.

2. Promo banner above the bar

Pill-shaped strip above the navbar with a customizable message, link, and dismiss button. Dismissals are remembered in localStorage — bump the storage key field to re-show after a campaign refresh. Edit colors (background, text, link accent) and copy under Promo banner in the module sidebar.

3. AI badge style

First-class item badge style for AI features. Animated gradient (purple → indigo → cyan) with an inline sparkle. Distinct from generic "New" / "Beta" / "Coming soon" badges. Pick AI (gradient + sparkle) from any item's Badge style field. See "AI Copilot" in the Product mega above.

4. Changelog teaser column

Set any mega column's Column layout to Changelog teaser. Each item renders as a version pill (mono font), date label, and 2-line summary instead of an icon-and-link row. Reuse the regular item fields: title = version, badge = date, description = summary. See the Resources mega panel above for a live example.

5. Integration logos grid

Set any mega column's Column layout to Integration logos grid. Items render as a 3-column grid of logo cells with name labels — perfect for "Integrations" or "Tech stack" columns where a flat list of partners would look bland. Each cell takes either an image (preferred for real logos) or an icon. See Resources → Integrations above.

6. Trust bar at the bottom of every mega panel

Compliance and security badges (SOC 2, GDPR, HIPAA, ISO 27001, uptime SLA…) pinned at the bottom of every open mega panel. B2B buyers actively look for these signals; surfacing them in nav saves a click into the trust center. Configure heading, icons, and labels under Trust bar.

7. The full SaaS pattern as default content

Product / Solutions / Resources / Pricing / Company — the canonical 5-item B2B nav, pre-populated. Tabbed Solutions panel (Use Case / Industry / Role / Company Size). Featured customer-story sidebar. Dual Get demo + Start free CTAs. Real HubSpot form embedded inside the Company sidebar. No "build the whole thing from scratch" step.

8. Full width on scroll

The bar starts as a floating card and, once the page scrolls, expands to the full width of the screen and docks to the top edge. Menu items and dropdown panels stay where they are, so nothing jumps under the cursor. Turn it on under Settings → Sticky navigation → Full width on scroll. Try it with the Full width on scroll switch at the top of this page.

Getting Started

SaaS 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 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 SaaS 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.

Editor-side configuration map

• Promo banner — enable, message, link, dismissibility, storage key, colors.
• Trust bar — enable, heading, repeater of badges (label + icon).
• SaaS behavior → Enable ⌘K shortcut — toggle the keyboard shortcut + visible hint.
• Menu items → Mega columns → Column layout — switch any column between list / changelog / integrations.
• Menu items → Mega columns → Items → Badge style → AI — gradient + sparkle for AI features.
• SaaS Polish — every other piece of style (glass effect, icon color, badge sizing, form inputs, sidebar widths) is a module-level field. Zero hardcoded values in the CSS.

Style

Every style value is a configurable field — glass background opacity and blur, glass saturation, navbar border, mega-panel border, icon color and hover color, icon transition speed, featured-tag size, sidebar column width, form input padding/border/focus ring, submit button colors and radius. No hardcoded hex values, no hardcoded paddings. Bring your own font.

Mobile

Below your tablet breakpoint (default 1024px), the navbar collapses to a hamburger that opens a card-style mobile panel. The panel auto-sizes to its content with a max-height cap, then scrolls internally — it never stretches full-height on load. Horizontal margins, top gap, and bottom gap all mirror the navbar's positioning exactly. Top-level items become collapsible accordions; dual CTAs are pinned at the bottom of the panel.

Accessibility

• Mega panels expose role="menu"; menu items are keyboard-navigable (Tab, arrow keys, Enter).
• Mobile toggle exposes aria-expanded and aria-controls.
• Focus is trapped inside the mobile panel when open; Escape closes.
• Body scroll locks while the mobile panel is open.
• ⌘K shortcut respects preventDefault only inside the page — won't interfere with browser-level handlers.
• prefers-reduced-motion: reduce is honored everywhere.

Tech

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