Skip to content
Marketplace Assests

Smart Mega Menu Documention

1. Introduction (Overview)

The Smart Mega module helps you create modern, responsive, and highly customizable website navigation directly in HubSpot. Build simple dropdowns or advanced multi-column mega menus with nested submenus, promo boxes, a search bar, CTA buttons, and flexible styling options—all without writing code. Designed for ease of use, it lets you create professional navigation that works seamlessly across desktop, tablet, and mobile devices. 

2. Key Features

  • Fully responsive mega menu for desktop, tablet, and mobile.
  • Create multi-column mega menu layouts (2–4 columns).
  • Build unlimited dropdown menus and nested submenus.
  • Add featured content sections inside mega menu panels.
  • Include customizable promo boxes to highlight products, services, or offers.
  • Built-in search bar with show/hide option.
  • Two customizable CTA buttons with independent visibility controls.
  • Logo support for complete header navigation.
  • Light mode and dark mode support.
  • Built-in Multi-Language Switcher. 
  • Unlimited color customization for backgrounds, text, links, buttons, and hover states.
  • Customize typography, spacing, borders, and layout settings.
  • Smooth dropdown and mega menu animations.
  • Organize large navigation structures with ease.
  • No coding required—everything is managed through the visual editor.
  • Compatible with HubSpot's drag-and-drop page editor.
  • Easy to configure and maintain.
  • Clean, modern, and performance-focused design.
  • Suitable for business, SaaS, agency, eCommerce, portfolio, and corporate websites.

3. Installation – Downloading the Module from HubSpot Marketplace

  • Log in to your HubSpot account.
  • Go to the Marketplace from the main navigation menu.
  • Search for your module by name.
  • Find the module in the results and click Install.
  • If it’s a paid module, you can also click Buy Now to purchase and install directly.

4. How to Use – Adding the Module to Your Page

  • Open your HubSpot page editor.
  • Click Add Module.
  • Search for Smart Mega Menu.
  • Drag and drop the module into your page.
  • To display the Smart Mega Menu across your entire website, add the module to a global partial (such as your website's header). Once added, the navigation will automatically appear on every page that uses the global header, making it easy to manage your site's navigation from a single location.

  • The Smart Mega Menu module makes it easy to build modern website navigation directly within HubSpot. Simply add the module to your page or global header, configure your menu items, and customize the layout, styling, and navigation settings to match your website. Once published, the menu provides a responsive and user-friendly navigation experience across desktop, tablet, and mobile devices. 

5. Module Settings Guide

Content Tab: 

1. Logo – Upload your website logo and customize its size, spacing, and link destination.

2. Navigation Menu – Add unlimited top-level menu items and organize your website navigation with ease.

3. Mega Menu Panel – Convert any menu item into a multi-column mega menu and display rich navigation content.

4. Column Layout – Choose from 2, 3, or 4-column layouts to organize links and content efficiently.

5. Dropdown Menu – Create standard dropdown menus for simple and clean navigation.

6. Nested Submenus – Build multi-level navigation with unlimited nested submenu items.

7. Featured Content – Highlight important pages, products, or services inside your mega menu panel.

8. Promo Box – Add promotional cards with images, headings, descriptions, and CTA buttons.

9. Search Bar – Enable or disable the built-in search bar to help visitors quickly find content.

10. CTA Buttons – Add up to two customizable call-to-action buttons with independent show/hide controls.

11. Menu Icons  – Add icons to menu items within mega menu columns to improve navigation and visual appeal. 

12. Link Settings – Configure internal or external links, open links in a new tab, and manage navigation behavior.

13. Responsive Mobile Menu – Configure how the navigation is displayed on mobile devices with a responsive hamburger menu.

14. Visibility Controls – Show or hide the search bar, CTA buttons, promoboxes, and other optional elements.


Group 469489

 

2. Style Tab

1. Module Settings:
Customize section spacing, background color, and container width with full-width or custom-width options.

2. Layout Settings – Adjust the overall layout, spacing, and alignment of the navigation.

3. Color Settings – Customize colors for the background, text, links, hover states, and active menu items.

4. Typography – Change the font size, weight, line height, and text styling for menu items and headings.

5. Header Styling – Customize the header background, borders.

6. Mega Menu Panel – Style the mega menu panel with custom backgrounds, borders and border radius.

7. Dropdown Menu – Customize the appearance of dropdown menus, including colors and hover effects.

8. Promo Box Styling – Control the design of promo boxes, including backgrounds, borders, text, and buttons.

9. Search Bar – Customize the search field, icon, colors, border, and focus styles.

10. CTA Buttons – Style both CTA buttons with custom colors, typography, borders, hover effects, and spacing.

11. Mobile Menu – Customize the mobile navigation, hamburger icon, menu panel, and mobile menu item styles.

13. Responsive Settings – Fine-tune spacing and styling for desktop, tablet, and mobile devices.

Group 469485

 

6. Examples / Demo Preview

View the module in action: https://www.modfrybus.shop/smart-mega-menu

7. Support & Contact

For questions or support, contact us at productqueriemodfrybus@outlook.com We’re happy to help!