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
- After purchase, the module appears in your Design Manager under marketplace-modules/Mega Menu Pro.module.
- Open any page template in the Design Manager or Page Editor.
- Drag Mega Menu Pro from the module list into the top of your page.
- 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.
Logo & Layout Settings
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.
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:
- In the menu item settings, toggle Form > Show to on.
- Select a HubSpot form from the form picker.
- 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 focus to the navigation and between menu items. Closes any open dropdown.
- 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.
- Escape — Close the open dropdown and return focus to the menu item.
ARIA attributes (role="menubar", role="menu", aria-expanded, aria-haspopup, aria-hidden) are included for screen reader compatibility.
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.