The mega menu
built for education

Why an education-specific mega menu?

Generic mega menus can be reshaped for higher-ed sites — but they cost weeks of configuration and miss the affordances prospective students, parents, alumni, and corporate partners expect on the navigation of an R1 university, a regional college, or an online learning platform. Education Mega Menu Pro ships education-native features that no generic mega menu has out of the box: audience-pivot Programs tabs (Undergrad / Grad / Online / For Business), image-forward Admissions panel, research centers grid, faculty-publications changelog, featured campus event card, embedded inquiry form, and a multilingual switcher for international applicants.

Getting started

Education 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 Design Manager under marketplace-modules/Mega Menu 6 Pro.module.
2. Open any page template in the Design Manager or Page Editor.
3. Drag Education 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 so it loads automatically across the 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. Use for Apply (the strong apply-now CTA pattern).
• Dropdown — A single-column panel with a list of items. Each item has an icon, image, description, badge, and a link.
• Mega — A full-bleed multi-column panel with optional sidebar (featured event / promo / embedded form / video / product carousel). Use for Programs / Admissions / Student Life / Faculty & Research / Alumni / About.

Mega item types in detail

Audience-pivot Programs panel (tabbed)

Set Menu item → Layout mode = Tabs on Programs. Each mega column becomes a tab labelled with the column title (Undergraduate / Graduate / Online / For Business). Inside each tab, list 4–8 sub-programs with icons and descriptions. Choose Tab trigger = Hover for instant feedback or Click for touch-heavy audiences. The audience pivot is the heart of higher-ed navigation — a prospective MBA student should never have to scan a bachelor's list to find their path.

Image-forward Admissions panel

Three columns (Apply · Visit · Cost & Aid). For each item, upload a 1:1 Image (campus photography, students, library, graduation) instead of choosing an icon — Education Mega Menu Pro automatically renders these items as blog cards (image on top, title, italic subtitle), not the standard icon row. Helps applicants and parents visualize fit in seconds.

Faculty & Research panel (research centers + publications)

Two strategies that ship together:

• Set one column's Column layout = Integration logos grid and upload your research center logos as the column items. The 3-column grid is repurposed — here it's an institutional capability map (AI Lab · Bioscience · Public Policy · Climate · Quantum · Humanities), not a tech-stack flex.
• Set the second column's Column layout = Changelog teaser to render a faculty publications stream — version pill, date badge, 2-line summary. A real-time academic activity signal that applicants and journalists both look for.

Student Life panel (featured event card)

Pair a 2-column mega item (On Campus + Get Involved) with Featured Content (Sidebar) enabled. Add 1–2 event cards (image + tag like "Event · October 12, 2026" + headline). The sidebar pins these to the right of the panel. Perfect for highlighting open days, info sessions, or homecoming.

About panel (mission/leadership + inquiry form)

Pair a 2-column mega item (The University + Connect) with an Embedded Form (Sidebar) pinned on the right. The form takes a HubSpot form ID, an inline title and description, and a custom submit-button label. Lets prospective students raise their hand directly from the nav — no clicks to a contact page required.

---

Promo banner

A full-width strip above the navbar with a customizable message, link, and dismiss button. The leading dot has a pulsing crimson ripple animation that draws the eye without being noisy; ripple colour matches the link accent automatically. Dismissals are remembered in localStorage — bump the storage key field to re-show after each application cycle.

• Enable — Toggle the strip on or off.
• Text / Link text / Link URL — Message body, inline link text, and target URL.
• Dismissible — Show or hide the × close button.
• Storage key — Key used in localStorage. Change it to force the banner to re-appear for everyone (great for "Spring deadline approaching" or "Apply for Fall 2027").
• Background / Text / Accent colors — Three colour pickers. The default is ink #1a1a1a + ivory text + crimson #8b1538 for the link.

Trust bar

Anchor your accreditation and ranking credentials (Regionally Accredited · AACSB · US News Top 50 · R1 · Forbes) at the bottom of every mega panel. Applicants and their parents actively look for these signals — surfacing them in nav saves a click into the about page.

• Enable — Show or hide the bar across all mega panels.
• Heading — Short eyebrow text (default: Accredited & ranked).
• Badges — Repeater of label + icon (FontAwesome 5). Add 3–6 credentials.

Search

Toggle under Content → Search. When enabled, a search icon appears in the action bar. The placeholder defaults to Search programs, courses, faculty… — universal across higher-ed search intents.

⌘K / Ctrl-K 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.

CTAs

Add up to 3 buttons under Content → CTAs. The demo ships with Visit campus (secondary outline) + Apply now (primary crimson). Each button has text, URL, style (primary / secondary / ghost), and optional modal trigger. The crimson Apply-Now is the single most important conversion button on a higher-ed site — every panel reinforces it.

---

Style system

Every visual property is controlled from the Style tab — no CSS editing needed. The academic palette is wired in by default; change any value to re-skin.

Global

Base values that cascade through the entire module:

• Font — Body font for menu links, dropdown items, mega panels, mobile panel, forms. Defaults to Inter from Google Fonts.
• Editorial accent font — Serif used on column titles, sidebar titles, trust-bar heading, featured-card tags, changelog dates, and image-card subtitles. Defaults to Source Serif 4 from Google Fonts. Swap to Garamond or Caslon for a more classical feel; entire serif layer re-skins.
• Colors — Heading #1a1a1a, text #3a3a3a, muted #7a7a7a, body bg #fafaf6 (cool ivory), cards bg #ffffff, border #1a1a1a @ 10%.

Accent

The module's accent color — used on column titles, hover indicators, icons, link underlines, and badges. Default is academic crimson #8b1538 with hover #6f1029 and a 12%-opacity light tint. Replace with your school's brand color (royal, navy, gold, forest, garnet) and the entire mega menu re-skins instantly.

Nav bar

Controls the top bar:

• Background type — Light, Dark, Transparent, Custom Color, Gradient, or Background Image. The demo uses Custom #ffffff at 92% opacity.
• Blur background — Enable frosted-glass when the bar background has reduced opacity.
• Text colour / Hover colour — Direct pickers. The demo uses near-black #1a1a1a with a crimson hover.
• Width — Container, Full, or Compact. The demo uses Full with the bar content centered to 1280px.

Menu links · Dropdown panel · Dropdown items · Mega menu · Sidebar · Badges · Buttons

All seven sub-groups in the Style tab let you tune the corresponding visual layer — text/border/hover colors, font sizes, padding, radii, shadow tier. The demo wires every value to the academic palette so an admin only needs to change the Accent → color field to re-skin the entire menu to a different school's brand.

Forms (sidebar + mobile embedded HubSpot form)

The "Request information" form pinned in the About panel sidebar — and the same form rendered inside the mobile accordion — share one style group: labels, inputs, submit button, success state, and font family (inherits from Global → Font). Every value cascades to both desktop and mobile.

---

Column layouts

Inside any mega column, set Column layout to switch the rendering mode:

• List (default) — Icon (or image) + title + description rows. When items carry an image, they automatically render as image-on-top blog cards — used in the Admissions panel.
• Changelog teaser — Version pill (mono) + date badge + 2-line description. Perfect for the faculty publications stream.
• Integration logos grid — 3×N grid of logo cells with name labels. Used in the demo's Faculty & Research panel as a research centers grid.

Mobile behavior

Below your tablet breakpoint (default 1024px), the navbar collapses into a mobile layout:

• Logo left, hamburger right — Always, regardless of desktop logo position.
• Card-style panel — The mobile panel auto-sizes to its content with a max-height cap, then scrolls internally.
• Accordion items — Top-level items with dropdowns become collapsible accordions on tap.
• Featured cards on mobile — Render as image-on-top blog cards (16:9 image + italic serif tag + title). Perfect for the open-day event card.
• Embedded form on mobile — Title, description, inputs, and submit button align to the same horizontal padding as the menu items.
• Body scroll lock — When the mobile panel is open, overflow-hidden is applied to both html and body.
• CTA buttons — Pinned at the bottom of the mobile panel — keeps Apply-Now within thumb reach.

Animation

Set under Settings → Dropdown animation:

• Morph (default) — The dropdown wrapper smoothly morphs its size and position as you hover between menu items. Heights are measured live on each hover so the wrapper always matches the active panel exactly.
• Fade — Simple fade in/out for each panel.
• Slide — Subtle slide-down on open.
• Scale — Soft scale-up entrance.

Sticky scroll behavior

When sticky navigation is enabled (Settings → Sticky navigation), two extra options become available:

• Shrink on scroll — Padding reduces by 50% and the logo scales to 75% once the page scrolls past 50px.
• Transparent on top — The nav starts fully transparent over hero imagery and transitions to its configured solid style on scroll.

Keyboard navigation

Full WCAG-friendly keyboard support:

• Tab — Move focus across menu items.
• Arrow Left / Right — Move between top-level items. Items with dropdowns open on focus.
• Arrow Down — Open the focused dropdown and move focus to the first link.
• Arrow Up — Move to the previous link; returns to the parent on first item.
• Escape — Close the open panel and return focus to the parent item.
• ⌘K / Ctrl-K — Open the search panel from anywhere on the page.

ARIA attributes (role="menubar", role="menu", aria-expanded, aria-haspopup, aria-hidden) are included for screen readers — essential for accessibility compliance in higher-ed.

Click-to-open mode

Under Settings → Open dropdown on, switch to Click. Recommended for touch-heavy audiences (mobile applicants) and pages where mega panels contain interactive content (forms).

Icons

Both dropdown and mega items support an optional Icon. Icons render as inline SVGs from HubSpot's built-in FontAwesome 5.0.10 set.

• Education-friendly icons: graduation-cap, book, book-open, university, flask, lightbulb, microphone, users, globe, star, trophy, gem, medal, shield-alt, chart-line.
• Some icon names that look like FA5 are not in the 5.0.10 set bundled with HubSpot (e.g. award). Safe substitutes: gem, trophy, medal.

---

Tips for universities & e-learning platforms

• Pivot Programs by audience — A flat list of 30 majors reads as scattered. Grouped under 4 audience tabs (Undergrad / Grad / Online / For Business) reads as a thoughtfully designed funnel.
• Lead Admissions with images — Campus photography in the Admissions panel converts better than icons. Parents and prospects buy on visual confidence; icons feel generic.
• Pin the "Request information" form on About — Most higher-ed sites bury "Contact" three clicks away. Pin a HubSpot form inside the About panel and you'll get hand-raisers from the navbar itself.
• Surface one campus event — Resist filling every sidebar. A single featured event card with a real date ("Fall Open Day · October 12") converts better than three competing announcements.
• Two CTAs is the sweet spot — Visit campus + Apply now covers 90% of higher-ed funnels. The Apply-Now should always be primary crimson.
• Bump the storage key each cycle — Change educationmm_promo_v1 → educationmm_promo_v2 at the start of each application cycle. Old dismissals reset; new applicants see the deadline reminder.
• Enable the language switcher — Universities serve international applicants. Toggle Settings → Language switcher to surface a globe icon next to the search.
• Show research credibility — Use the Faculty & Research panel's changelog column to surface recent faculty publications. It signals an active intellectual community — more compelling than a static "Research" link.

Tech

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

• Live height measurement — On every hover, the mega panel height is measured with getBoundingClientRect() on the visible content.
• Single source of truth — Only the hover handler writes wrapper.style.height. Form embeds that grow async pick up the new height on the next hover.
• Trust bar visibility — Hidden for dropdown panels (e.g. Apply link), shown for mega panels.
• Font loading — Both fonts (Inter body + Source Serif 4 editorial) are HubSpot font fields with load_external_fonts: true, so the Google Fonts <link> is injected automatically.
• Zero hardcoded design tokens — Every color, font, padding, radius, shadow, blur, opacity, hover state, and focus state used for primary design surfaces is wired to a style.* field.