Mega Menu Pro for HubSpot

Getting Started

Mega Menu Pro is a standalone HubSpot module — no theme required. Drag it into any page template or add it via a global partial to use it site-wide.

Installation

1. After purchase, the module appears in your Design Manager under marketplace-modules/Mega Menu Pro.module.
2. Open any page template in the Design Manager or Page Editor.
3. Drag Mega Menu Pro from the module list into the top of your page.
4. To make it appear on every page, add it to a global partial (e.g. your header partial) so it loads automatically across your 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.
• Dropdown — Opens a single-column dropdown panel with a list of links. Each link can have an icon, image, description, and badge. You can also embed a HubSpot form at the bottom.
• Mega — Opens a full mega panel with multiple columns of links, plus optional sidebar content (featured posts, promo banner, form) and a product carousel.

Menu Item Types in Detail

Dropdown Type

Best for simple navigation groups (e.g. About, Contact, Resources). Configure:

• Dropdown Items — Each item has: title, description (optional), icon (optional, from FontAwesome 5), image (optional), link URL, badge text (optional), and action type (link, anchor scroll, or modal trigger). Icons render as inline SVGs and their size/color are controlled from Style > Dropdown Items.
• Footer Link — Optional “View all” link at the bottom of the dropdown.
• Form — Toggle to embed a HubSpot form inside the dropdown (great for “Contact” menus).

Mega Type

Best for content-rich navigation (e.g. Products, Collections, Services). Configure:

• Columns (1–5) — Each column has a title and a list of link items (same options as dropdown items).
• Sidebar — Optional right-side panel with:
  • Featured Posts — Blog-style cards with image, tag, and title.
  • Promo Banner — Colored card with image, eyebrow, title, description, and CTA link.
  • Form — Embedded HubSpot form.
• Product Carousel — A vertical carousel column that displays one product at a time with auto-rotation and dot navigation. Each product has an image, name, price, and link.

Dropdown Width

Each Dropdown and Mega menu item has its own Dropdown Width field, so the panel width is independent of the navigation bar. This is the fix for full-width bars where the dropdown stretched too wide and felt sparse:

• Auto (default) — The panel fits its content, the same as before. Mega panels that use 4+ columns, a sidebar, or a product carousel still expand to the full bar automatically.
• Full width — Force the panel to match the full bar width.
• Custom width (px) — Set an exact pixel width (capped at the bar width).
• Percentage of bar — Set the width as a percentage of the bar width — handy for keeping the dropdown narrower than a full-width bar.
• Align to menu item — Fit the content, but line the panel’s left edge up with its menu item instead of centering it.

For Auto, Custom and Percentage widths, a Dropdown alignment field controls where the panel sits: Under menu item (default) centers it beneath the link that opened it, while Center of navigation bar always centers it in the bar — useful when a narrow panel on a left-side menu item would otherwise sit far to the left on wide screens.

Logo & Layout Settings

Layout Mode

Under Settings > Layout Mode, choose how the bar sits on the page:

• Floating (default) — The bar is an inset, rounded pill that overlays the page. Use the Top Margin setting to control the gap from the top edge. Existing setups are unchanged by this option.
• Docked — The bar runs edge to edge: its background spans the full browser width up to the very top, with no inset gap and no rounded corners. The navigation sits in the page flow, so your content starts below it automatically — no need to add top padding to each page. With Sticky on, the docked bar pins flush to the top of the viewport on scroll. Combine Docked with a Full width nav bar to get a full-width header whose content still aligns to your chosen container width.

Logo

Upload your logo under Content > Logo. You can set separate logos for light and dark presets. Size is controlled from the Style tab under Logo > Max Width / Max Height.

Logo Position

Under Settings > Logo Position:

• Left (default) — Logo on the left, menu items to the right.
• Center — Logo centered between two halves of the menu. The menu items split evenly: first half on the left, second half on the right.

Menu Alignment

Controls where menu items sit within the bar: Left, Center, or Right.

Search

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

CTA Buttons

Add up to 3 call-to-action buttons under Content > CTAs. Each button has text, link, style (primary, secondary, or ghost), and optional modal trigger.

Sticky Navigation

Enable under Settings > Sticky. The nav bar stays fixed at the top of the viewport as the user scrolls. In Floating mode it stays an inset pill; in Docked mode it pins flush to the top edge and reserves its own height so page content never hides beneath it.

Style System

Every visual property is controlled from the Style tab — no CSS editing needed. The style system is organized into groups:

Global

Base values that cascade through the entire module:

• Colors — Heading, text, muted text, body background, card background, border color.
• Font Sizes — XS, SM, and Base sizes. All other sizes derive from these.
• Spacing Unit — A base value (default: 4px) that generates the full spacing scale (xs through 3xl). Increase it for a more spacious layout, decrease for tighter.
• Border Radius — A base value (default: 8px) that generates the radius scale (sm through 2xl). Set to 0 for sharp corners, higher for rounder.
• Shadow Opacity — Controls the intensity of all shadows across the module.
• Transition Speed — Base animation speed in milliseconds. All transitions (hover, open, morph) derive from this.
• Letter Spacing — Applied to labels, column titles, and badges.
• Blur Strength — Backdrop blur intensity (used when blur is enabled on nav bar).
• Opacity — Muted and hover opacity values for subtle text and interactive states.

Nav Bar

Controls the main navigation bar appearance:

• Background Type — Light (uses card bg), Dark (uses dropdown bg), Transparent, Custom Color, Gradient, or Background Image.
• Blur Background — Enable frosted-glass effect (works with semi-transparent backgrounds).
• Text & Hover Colors — Direct color pickers for nav text.
• Width — Full width, Container (with max-width), or Compact.
• Border, Radius, Shadow, Padding — Full control over the bar’s shape.

Menu Links

Style the top-level menu items: text color, hover color, hover background, font size, font weight, padding, and border radius.

Dropdown Panel

Controls the dropdown/mega panel container: background color (with opacity for glass effects), border, radius, shadow, padding, and gap between items.

Dropdown Items

Style individual items inside dropdowns and mega columns: text color, description color, hover background, hover text, icon color, icon size (default 16px), image radius, padding, and border radius. Icons inherit the icon color and icon size values — use lighter/muted colors for a subtle look.

Mega Menu

Column-specific settings: column gap, column title color, font size, font weight, and text transform.

Sidebar

Featured content area style: background color, border radius, featured image radius, tag color, and tag background.

Badges

Small labels on menu items (e.g. “New”, “Hot”): background, text color, font size, border radius, and padding.

Buttons

CTA button styling with three variants:

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

All share: font size, font weight, padding, border radius, and border width.

Accent

The module’s accent color used for active indicators, icon tints, and interactive highlights. Includes main color, hover color, light tint, and status colors (success, warning, error). The default accent is monochrome black (#18181b) for a clean, neutral look out of the box — change it to any brand color.

Mobile Behavior

On screens below the tablet breakpoint (default: 1024px), the menu collapses into a mobile layout:

• Logo left, hamburger icon right — always, regardless of desktop logo position.
• Same styling as desktop — The mobile panel uses the exact same dropdown colors, radius, shadows, and item styles. No separate mobile theme.
• Accordion toggles — Menu items with dropdowns/mega panels expand as single-column accordions on tap.
• All content visible — Products (horizontal scroll), featured posts, promo banners, and forms all appear inside the mobile accordion.
• CTA buttons — Stack at the bottom of the mobile panel.

Product Carousel

Available inside Mega-type menu items. Enable under the menu item’s Products toggle.

• Displays as a vertical column alongside your link columns (the 4th column).
• Shows one product at a time with a smooth fade transition.
• Auto-rotates every 3 seconds, pauses on hover.
• Dot navigation below the product for manual browsing.
• Each product has: image, name, price, and link URL.
• On mobile, products display as a horizontal scrollable row.

Embedded Forms

You can embed a HubSpot form inside any Dropdown or Mega menu item:

1. In the menu item settings, toggle Form > Show to on.
2. Select a HubSpot form from the form picker.
3. Optionally add a title and description above the form.

The form inherits all module styling automatically — input fields, labels, buttons, and error states all match your Style tab settings. On mobile, the form appears inside the accordion submenu.

Animation

The dropdown animation is set under Settings > Animation:

• Morph (default) — The dropdown wrapper smoothly morphs its size and position as you hover between different menu items. Feels fluid and modern.
• Fade — Simple fade in/out for each dropdown panel.

Sticky Scroll Behavior

When sticky navigation is enabled, two additional options become available under Settings:

Shrink on Scroll

When enabled (default), the navigation bar shrinks as the user scrolls down — padding reduces by 50% and the logo scales to 75% of its original size. Scrolling back to the top restores the original dimensions. The transition is smooth and uses the module’s configured transition speed.

Transparent on Top

The navigation starts fully transparent (no background, no shadow, no border) and transitions to its configured solid style once the user scrolls past 50px. This is ideal for pages with hero images or videos where you want the navigation to overlay the content at the top of the page.

Both features can be combined — the nav starts transparent and shrinks simultaneously when the user scrolls.

Keyboard Navigation

Mega Menu Pro includes full keyboard navigation for accessibility compliance:

• Tab — Move through the navigation. Closed dropdowns are skipped. From a menu item with an open dropdown, Tab moves through the links and form fields of that dropdown in order, then on to the next menu item, closing the dropdown behind it.
• Enter / Space — Open or close the dropdown of the focused menu item, in both hover and click mode.
• Arrow Left / Right — Move between top-level menu items. If the focused item has a dropdown, it opens automatically.
• Arrow Down — Open the dropdown for the focused menu item and move focus to the first link inside. If already inside a dropdown, moves to the next link.
• Arrow Up — Move to the previous link inside a dropdown. If at the first item, returns focus to the parent menu item.
• Arrow keys inside form fields keep their normal behaviour (moving the cursor, choosing options).
• Escape — Close the open dropdown, or the mobile menu, and return focus to the menu item or menu button.

The navigation follows the disclosure pattern: each menu button carries aria-expanded and aria-controls pointing at its dropdown, and closed dropdowns are hidden from screen readers and the keyboard.

Click-to-Open Mode

By default, dropdowns open on hover. Under Settings > Open dropdown on, you can switch to Click mode:

• Hovering over menu items will not open dropdowns.
• Clicking a menu item with a dropdown toggles it open/closed.
• Clicking outside the dropdown or menu closes it.
• Keyboard navigation works identically in both modes.

Click mode is recommended for touch-heavy audiences, mobile-first sites, or when mega panels contain interactive content (forms, carousels) that users might accidentally trigger on hover.

Advanced Features

Language Switcher

If your site has multi-language content, the module automatically shows a language switcher icon in the actions bar. Configure display mode under Settings > Language Display.

Action Types

Each dropdown/mega item link supports three action types:

• Link — Standard URL navigation.
• Anchor — Smooth scrolls to a section on the same page (enter the anchor ID).
• Modal — Triggers a modal by name (for integration with modal modules).

Badges

Add attention-grabbing labels to any menu item or dropdown link. Set the badge text and choose a style: default (subtle) or accent (colored). Great for highlighting “New”, “Sale”, or “Popular” items.

Icons

Both dropdown items and mega column items support an optional Icon field. Icons are rendered as inline SVGs from HubSpot’s built-in FontAwesome 5 icon set.

• Adding an icon — In each dropdown/mega item, click the Icon field and choose from the icon picker. Use style “Solid” for filled icons or “Regular” for outlined.
• Size & Color — Controlled globally from Style > Dropdown Items > Icon Size (default: 16px) and Icon Color (default: #71717a, a muted gray). On hover, icons inherit the hover text color.
• Mix and match — You can have some items with icons and some without. Items without icons will align properly alongside items that have them.

Tips & Best Practices

• Start with a preset — Look at the five demos above for inspiration. Copy the style approach that fits your brand, then customize from there.
• Use the Global spacing unit — Changing just the spacing unit and border radius in the Global style group transforms the entire module’s feel (tight and sharp vs. spacious and rounded).
• Dark mode — Set Nav Bar background type to “Dark” or “Custom” with a dark color, then adjust Dropdown Panel and Dropdown Items colors accordingly. The mobile menu inherits these automatically.
• Glass effect — Set a background color with reduced opacity (e.g. 85%) and enable “Blur Background” on the Nav Bar for a frosted-glass look.
• Keep mega panels focused — 3–4 columns of links + a sidebar or product carousel is the sweet spot. 5 columns work well for content-heavy menus (e.g. Solutions by Role, Industry, Use Case).
• Test on mobile — Always preview the mobile accordion to make sure all your content fits naturally in the single-column layout.