--- title: Mega Menu Pro — Advanced Navigation Module for HubSpot CMS description: HubSpot mega menu module with dropdowns, multi-column panels, search overlay, product carousel, embedded forms, and 5 animation styles. Works with any HubSpot theme. --- # Mega Menu Pro for HubSpot A fully customizable navigation module with dropdowns, mega panels, product carousels, embedded forms, and complete style control — no code required. Default Configuration ## Out of the Box The module rendered with its default settings — all menu items, mega panels, search, and CTA buttons come straight from the defaults. Icons on every submenu item. [![Studio Nope](https://www.studionope.com/hs-fs/hubfs/studio-nope-logo.png?width=140&name=studio-nope-logo.png)](https://www.nopethemes.com/?hsLang=fr) - Products - Solutions - Pricing - Blog - Contact - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) Get Started - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) Platform Analytics Real-time dashboards & reports Automation Workflow builder & triggers Integrations New 500+ connectors API Developer tools & SDKs Explore all products Solutions Marketing Teams Campaign management Sales Teams Pipeline optimization Enterprise Custom deployment Resources Documentation Guides & references Changelog Latest updates Status System uptime By Role For Marketers Campaign tools For Sales Pipeline CRM For Developers APIs & SDKs By Company Startups Launch faster SMB Scale efficiently Enterprise Custom deployment By Industry SaaS Subscription tools E-Commerce Online retail Finance Compliance ready Use Cases Lead Generation Capture & convert Email Marketing Automated campaigns Analytics Data insights Success Case Studies Real results Partners Certified experts Community Join 10k+ members View all solutions - Products Platform Analytics Automation Integrations New API Explore all products Solutions Marketing Teams Sales Teams Enterprise Resources Documentation Changelog Status - Solutions By Role For Marketers For Sales For Developers By Company Startups SMB Enterprise By Industry SaaS E-Commerce Finance Use Cases Lead Generation Email Marketing Analytics Success Case Studies Partners Community View all solutions - Pricing - Blog - Contact Get Started --- Real Estate / Property Agency ## Dark with Featured Content Dark preset with dual CTAs, search enabled, mega menu with featured blog images and an embedded form in the sidebar. Gold accent on dark charcoal. [![Property Co](https://www.studionope.com/hs-fs/hubfs/studio-nope-logo-negative.png?width=130&name=studio-nope-logo-negative.png)](https://www.nopethemes.com/?hsLang=fr) - Buy - Rent - Sell - About - Contact - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) List Your Property Book Valuation - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) Residential Houses Family homes Apartments City living Penthouses Luxury living New Developments New Off-plan Browse all properties Commercial Office Space Prime locations Retail Units High street Warehouses Industrial Land & Development Building Plots Development Sites Agricultural Land From the Blog ![Modern interior](https://www.studionope.com/hubfs/getty-images-ZpYVxBIemVg-unsplash.jpg) Market Update Property Market Trends for 2025 ![Interior design](https://www.studionope.com/hubfs/karolina-grabowska-M50bBAz5G9c-unsplash.jpg) Guide First-Time Buyer's Complete Guide Long-Term Rentals 12+ month leases Short-Term Rentals Flexible stays Student Housing Near universities Corporate Lets Business relocations View all rentals Selling Services Free Valuation Get your property valued today Our Process How we sell your home Success Stories Recent sales Marketing Photography Professional shots Virtual Tours 360° walkthroughs Floor Plans Detailed layouts Pricing & Fees Commission Rates Transparent pricing Fee Calculator Estimate your costs Compare Packages Find the right plan Resources Market Report Latest property data Seller's Guide Step-by-step Staging Tips Maximise your price Get a Free Valuation Enter your details and we'll be in touch. Our Company About Us 25 years of expertise Our Team Meet the agents Careers Hiring Join our team Locations London Head office Manchester Northern hub Edinburgh Scotland office All locations Resources Blog Market insights Guides Buying & selling tips FAQ Common questions Legal Privacy Policy Terms of Service Cookie Policy Limited Offer Free Property Valuation Book your free valuation before March 31st Book Now - Buy Residential Houses Apartments Penthouses New Developments New Browse all properties Commercial Office Space Retail Units Warehouses Land & Development Building Plots Development Sites Agricultural Land From the Blog Property Market Trends for 2025 Market Update First-Time Buyer's Complete Guide Guide - Rent Long-Term Rentals Short-Term Rentals Student Housing Corporate Lets - Sell Selling Services Free Valuation Our Process Success Stories Marketing Photography Virtual Tours Floor Plans Pricing & Fees Commission Rates Fee Calculator Compare Packages Resources Market Report Seller's Guide Staging Tips Get a Free Valuation Enter your details and we'll be in touch. - About Our Company About Us Our Team Careers Hiring Locations London Manchester Edinburgh All locations Resources Blog Guides FAQ Legal Privacy Policy Terms of Service Cookie Policy Limited Offer Free Property Valuation - Contact List Your Property Book Valuation --- Fashion / Luxury Brand ## Center Logo with Product Carousel Logo centered between split menu items, no CTA buttons, clean minimal styling, and a full-width product carousel inside the mega menu panel. [![Maison Noire](https://www.studionope.com/hs-fs/hubfs/studio-nope-logo.png?width=180&name=studio-nope-logo.png)](https://www.nopethemes.com/?hsLang=fr) - New In - Collections - Stories - Stores - About - Contact - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) Women Dresses Tops & Blouses Knitwear Trousers Outerwear New Shop all women Men Shirts Suits & Blazers Knitwear Outerwear Shop all men Accessories Bags Scarves Jewellery Sunglasses Trending Now ![Silk Wrap Dress](https://www.studionope.com/hubfs/getty-images-ZpYVxBIemVg-unsplash.jpg) Silk Wrap Dress €890 ![Cashmere Coat](https://www.studionope.com/hubfs/karolina-grabowska-M50bBAz5G9c-unsplash.jpg) Cashmere Coat €1,450 ![Leather Tote](https://www.studionope.com/hubfs/getty-images-ZpYVxBIemVg-unsplash.jpg) Leather Tote €650 ![Wool Blazer](https://www.studionope.com/hubfs/karolina-grabowska-M50bBAz5G9c-unsplash.jpg) Wool Blazer €780 ![Linen Shirt](https://www.studionope.com/hubfs/getty-images-ZpYVxBIemVg-unsplash.jpg) Linen Shirt €320 Spring/Summer 2026 Latest collection Autumn/Winter 2025 Current season Essentials Timeless pieces Our Story Heritage & craftsmanship Sustainability Our commitment Careers Join the team Get in Touch We'd love to hear from you. - New In Women Dresses Tops & Blouses Knitwear Trousers Outerwear New Shop all women Men Shirts Suits & Blazers Knitwear Outerwear Shop all men Accessories Bags Scarves Jewellery Sunglasses Trending Now ![Silk Wrap Dress](https://www.studionope.com/hubfs/getty-images-ZpYVxBIemVg-unsplash.jpg) Silk Wrap Dress €890 ![Cashmere Coat](https://www.studionope.com/hubfs/karolina-grabowska-M50bBAz5G9c-unsplash.jpg) Cashmere Coat €1,450 ![Leather Tote](https://www.studionope.com/hubfs/getty-images-ZpYVxBIemVg-unsplash.jpg) Leather Tote €650 ![Wool Blazer](https://www.studionope.com/hubfs/karolina-grabowska-M50bBAz5G9c-unsplash.jpg) Wool Blazer €780 ![Linen Shirt](https://www.studionope.com/hubfs/getty-images-ZpYVxBIemVg-unsplash.jpg) Linen Shirt €320 - Collections Spring/Summer 2026 Autumn/Winter 2025 Essentials - Stories - Stores - About Our Story Sustainability Careers - Contact Get in Touch We'd love to hear from you. --- Minimal / Agency ## Clean & Simple No buttons, no search, no frills. Just the logo and a handful of clean menu items with subtle dropdowns. Perfect for portfolio sites and creative agencies. [![Studio](https://www.studionope.com/hs-fs/hubfs/studio-nope-logo.png?width=120&name=studio-nope-logo.png)](https://www.nopethemes.com/?hsLang=fr) - Work - Services - About - Journal - Contact - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) Brand Identity Logos, guidelines & assets Web Design Websites & digital products Art Direction Campaigns & editorial View all projects Strategy Brand positioning & research Design Visual identity & systems Development Web & app build - Work Brand Identity Web Design Art Direction - Services Strategy Design Development - About - Journal - Contact Tech / SaaS Platform ## Click to Open Dropdowns open on click instead of hover — ideal for touch-heavy audiences. Try clicking the menu items with dropdowns. Blue accent on clean white, modern SaaS feel. [![LaunchPad](https://www.studionope.com/hs-fs/hubfs/studio-nope-logo.png?width=130&name=studio-nope-logo.png)](https://www.nopethemes.com/?hsLang=fr) - Products - Pricing - Customers - Blog - Contact - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) Book Demo Start Free Trial - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) Platform Analytics Real-time dashboards Automation Workflow builder Integrations New 500+ connectors API Developer tools Explore platform Solutions Marketing Teams Campaign management Sales Teams Pipeline optimization Enterprise Custom deployment Resources Documentation Guides & references Changelog Latest updates Status System uptime Starter For small teams Professional Growing businesses Enterprise Popular Custom pricing Compare plans - Products Platform Analytics Automation Integrations New API Explore platform Solutions Marketing Teams Sales Teams Enterprise Resources Documentation Changelog Status - Pricing Starter Professional Enterprise Popular - Customers - Blog - Contact Book Demo Start Free Trial --- New in v2 ## Tab Layout, Video Sidebar, Notification Dots & Plus Indicator All four new features in one demo. Products mega panel uses **tab layout** (hover tabs switch visible content). Resources panel has an embedded **video sidebar**. Notice the **notification dots** on Products and Blog. Submenu indicators use the **plus icon** instead of chevrons. [![Acme Inc](https://www.studionope.com/hs-fs/hubfs/studio-nope-logo.png?width=130&name=studio-nope-logo.png)](https://www.nopethemes.com/?hsLang=fr) - Products3 - Resources - Pricing - Blog - Contact - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) Get Started - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) Platform Solutions Industries Compare Analytics Real-time dashboards and reports Automation Workflow builder with triggers Integrations New 500+ native connectors API Platform Developer tools and SDKs Data Pipeline ETL and reverse ETL AI Copilot Beta AI-powered assistant Security SOC 2 and GDPR compliance Mobile SDK iOS and Android libraries View all platform tools Marketing Teams Campaign management and analytics Sales Teams Pipeline and CRM optimization Customer Success Retention and expansion tools RevOps Revenue operations alignment Product Teams Usage analytics and feedback Enterprise Custom deployment options See all solutions SaaS Product-led growth tools E-commerce Storefront optimization Financial Services Compliance-ready platform Healthcare HIPAA-compliant workflows Education Student lifecycle management Media Audience engagement tools vs. HubSpot Side-by-side comparison vs. Salesforce Feature and pricing comparison vs. Marketo Marketing platform comparison Migration Guide Free Switch in 48 hours ROI Calculator See your potential savings Why switch to us Learn Documentation Guides and references Video Tutorials Step-by-step walkthroughs Webinars Live sessions with experts API Reference Developer documentation Browse all resources Community Forum Ask and answer questions Events Meetups and conferences Partners Agency directory Updates Changelog Latest releases Roadmap What is coming next Status Page System uptime Platform Overview See how teams use our platform to ship faster. ![Platform demo](https://www.nopethemes.com/hubfs/raw_assets/public/studio-nope-theme/images/templates/helper-img-1.jpg) Watch more videos Starter For small teams Professional Growing businesses Enterprise Popular Custom pricing Compare all plans - Products 3 Platform Analytics Automation Integrations New API Platform Data Pipeline AI Copilot Beta Security Mobile SDK View all platform tools Solutions Marketing Teams Sales Teams Customer Success RevOps Product Teams Enterprise See all solutions Industries SaaS E-commerce Financial Services Healthcare Education Media Compare vs. HubSpot vs. Salesforce vs. Marketo Migration Guide Free ROI Calculator Why switch to us - Resources Learn Documentation Video Tutorials Webinars API Reference Browse all resources Community Forum Events Partners Updates Changelog Roadmap Status Page Platform Overview ![Platform demo](https://www.nopethemes.com/hubfs/raw_assets/public/studio-nope-theme/images/templates/helper-img-1.jpg) - Pricing Starter Professional Enterprise Popular - Blog - Contact Get Started --- Docked Layout & Dropdown Width ## Full-Width Bar, Contained Dropdowns Layout mode set to **Docked**: the bar background runs edge to edge and the navigation sits in the page flow instead of floating over it (when Sticky is on, it pins flush to the top). Each menu sets its own dropdown width independently of the bar — Products is a fixed 720px **centered in the bar** (even though it is the leftmost item), Solutions is 70% of the bar under its menu item, Resources aligns to its menu item. Use the new **Dropdown alignment** field to center a narrow panel in the bar instead of pinning it to the menu item. [![Northwind](https://www.studionope.com/hs-fs/hubfs/studio-nope-logo.png?width=132&name=studio-nope-logo.png)](https://www.nopethemes.com/?hsLang=fr) - Products - Solutions - Resources - Pricing - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) Get Started - [Français](https://www.nopethemes.com/fr/mega-menu-pro-for-hubspot) - [English](https://www.nopethemes.com/mega-menu-pro-for-hubspot) Platform Analytics Dashboards and reports Automation Workflow builder Integrations New 500+ connectors Solutions Marketing Campaign management Sales Pipeline and CRM Support Help desk and tickets Resources Docs Guides and references Changelog Latest updates Status System uptime Explore all products By Team For Marketers Campaign tools For Developers APIs and SDKs By Size Startups Launch faster Enterprise Custom deployment Documentation Guides and references Blog News and tutorials Community Join the forum - Products Platform Analytics Automation Integrations New Solutions Marketing Sales Support Resources Docs Changelog Status Explore all products - Solutions By Team For Marketers For Developers By Size Startups Enterprise - Resources Documentation Blog Community - Pricing Get Started --- Documentation ## Setup & Configuration Guide ## 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. Mega Menu Pro by Studio Nope