A trust-forward navigation module for residential brokerages, commercial real estate firms, and PropTech platforms. Property type/location/status filters, agent finder, neighborhood guides, mortgage tools, embedded viewing-request form, and a multi-office locations switcher.
Seven top-level items mirroring the navigation patterns used by Compass, Redfin, Coldwell Banker, Sotheby's International Realty, and Zillow Premier Agent. Tabbed Properties panel (By Type / By Setting / By Strategy / Just Listed) with MLS listing cards inside the final tab. Image-forward Buy & Sell columns. Agent finder with a featured-broker sidebar card. Featured-neighborhoods grid with median price + active listings. Calculator hub. Embedded Schedule a viewing HubSpot form pinned in About.
Residential brokerages, commercial real estate firms, and PropTech platforms need a navigation that filters listings the way buyers think (type / location / status / price), surfaces agent expertise, anchors local neighborhood knowledge, hands prospects a mortgage calculator without leaving the nav, and routes hand-raisers into a viewing request. Here's how Real Estate Mega Menu Pro covers each one.
#ffffff + deep navy #0f1e2e + champagne gold accent #c9a96e. DM Sans body, DM Serif Display serif. Pill-shaped buttons + floating-label form inputs.Everything you need to configure Real Estate Mega Menu Pro for your residential brokerage, commercial real estate firm, or PropTech platform.
Generic mega menus can be shoehorned into property shapes — but they cost weeks of configuration and miss the affordances buyers and sellers expect on Compass, Redfin, Coldwell Banker, Sotheby's International Realty, and the brokerages featured on Realtor.com. Real Estate Mega Menu Pro ships property-native features that no generic mega menu has out of the box: tabbed property filters (type / location / status / price), image-forward Buy & Sell columns, an agent finder with a featured-broker sidebar card, a neighborhood grid backed by a Market Insights changelog, an embedded calculator hub, and a viewing-request HubSpot form pinned in the About panel.
Real Estate 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.
marketplace-modules/Mega Menu 5 Pro.module.In the module's Content tab, you'll find the Menu Items repeater. Each item has a Type field with three options:
Set Menu item → Layout mode = Tabs with four mega columns. Each column becomes a tab labelled with the column title (By Type / By Setting / By Strategy / Just Listed). The first three tabs are icon-row sub-filters (4–8 items per tab with icons and short descriptions). The final Just Listed tab swaps in image-bearing items, which Real Estate Mega Menu Pro automatically renders as horizontal MLS listing cards with a FOR SALE ribbon. Choose Tab trigger = Hover for instant feedback or Click for touch-heavy audiences. Replaces a "filters" page that prospects normally have to click into.
Three audience columns (For Buyers · For Sellers · Investors). For each item, upload a 1:1 Image instead of choosing an icon — Real Estate Mega Menu Pro automatically renders these items as property cards (image on top, title, italic subtitle), not the standard icon row. Reads like a portfolio of homes.
Two columns to filter agents (Find an Agent + Join Our Team) — and enable Featured Content (Sidebar) on the same item to pin one broker card to the right rail. The card takes a photo, a tag ("Featured Agent · Top 1%"), and an outcome headline ("14 years closing luxury homes…").
Three columns grouped by setting (Coastal & Beach · Urban & Downtown · Mountain & Resort), with two featured-neighborhood cards per column. Each card uses an uploaded image (rendered automatically as a vertical image-on-top card) plus the neighborhood name and a short stat line — median price and active-listings count. This is the Compass / Sotheby's pattern. Add more columns by setting (Suburban · Lakefront · Equestrian, etc.) to expand the grid.
Three icon-row columns: Calculators (Mortgage / Affordability / Rent vs Buy / Investment ROI), Resources (Buying Guide / Selling Guide / Investment 101 / Glossary), and Account (Saved Searches / Favorites / Alerts / Documents). Surfacing the calculator hub from the navbar removes one of the most common bounce points on brokerage sites.
Pair a 2-column mega item (Company + Get in Touch) with an Embedded Form (Sidebar) pinned on the right. The form takes a HubSpot form ID, an inline title and description ("Schedule a viewing"), and a custom submit-button label. Lets prospects request a private tour directly from the nav — bypassing the Contact-page deflection.
A full-width strip above the navbar with a customizable message, link, and dismiss button. The leading dot has a pulsing emerald 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 a campaign refresh.
localStorage. Default is propertymm_promo_v1. Change it to force the banner to re-appear for everyone (e.g. when you launch a new round of listings).#1d1c1a + white text + deep-emerald #2c5e4a for the link. The accent color also drives the ripple animation around the leading dot.prefers-reduced-motion.Anchor your licensing and accreditation credentials (NAR Member, MLS Listed, BBB Accredited, Realtor.com Partner, Inc. 5000…) at the bottom of every mega panel. Property buyers actively look for these signals before reaching out — surfacing them in nav saves a click into the about page.
Toggle under Content → Search. When enabled, a search icon appears in the action bar. Clicking it reveals an inline field with the placeholder "Search by address, ZIP, neighborhood…" — wired to HubSpot's built-in search suggestions by default.
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. Toggle under SaaS behavior → Enable ⌘K shortcut.
Add up to 3 buttons under Content → CTAs. The demo ships with Schedule a Viewing (primary ink) + List Your Property (secondary outline). Each button has text, URL, style (primary / secondary / ghost), and optional modal trigger.
Every visual property is controlled from the Style tab — no CSS editing needed. The real-estate palette is wired in by default; change any value to re-skin.
Base values that cascade through the entire module:
#1d1c1a, text #4a4744, muted #8b857d, body bg #f4ede3 (warm sand), cards bg #ffffff, border #1d1c1a @ 12%.The module's accent color — used on column titles, hover indicators, icons, link underlines, and badges. Default is deep emerald #2c5e4a with hover #1f4233 and a 12%-opacity light tint. Premium-real-estate colour out of the box; replace with your brand colour and the entire mega menu re-skins instantly.
Controls the top bar:
#ffffff at 92% opacity over the sand body.#1d1c1a with an emerald hover.1280px.Top-level menu items: text colour, hover text, hover background, active indicator colour, font size, font weight, padding, and border radius. The demo uses Inter Tight 500 at 14px with an emerald hover and no radius for a clean editorial look.
The panel container (used by both dropdowns and mega panels): background colour (with opacity for glass effects), border, radius, shadow, padding, and gap between items.
Style individual rows inside dropdowns and mega columns: text colour, description colour, hover bg, hover text, icon colour, icon size, image radius, padding, and border radius. Icons inherit the icon colour and size — the demo uses emerald icons at 18px.
Column-specific settings: column gap, column title colour (emerald by default), font size, weight, and text transform (uppercase). Combine with the Playfair Display serif inherited from the editorial layer for a magazine-style column eyebrow.
Style the right-rail content: background colour, border radius, featured-image radius, tag colour, and tag background. Drives the look of the featured-agent card and the embedded viewing-request form.
Small labels next to menu items or column items (Hiring, New, Beta, Free, AI): background, text colour, font size, border radius, vertical/horizontal padding. Five built-in style presets.
Three variants for top-bar CTAs and panel CTAs:
The "Schedule a viewing" form pinned in the About panel sidebar — and the same form rendered inside the mobile accordion — share one style group under SaaS Polish → Form style:
One unified group for the polish layer. Every value is editor-controllable — see the Style tab.
Inside any mega column, set Column layout to switch the rendering mode:
Below your tablet breakpoint (default 1024px), the navbar collapses into a mobile layout:
Set under Settings → Dropdown animation:
When sticky navigation is enabled, two extra options become available:
Full WCAG-friendly keyboard support: Tab to move focus, Arrow Left/Right between top items, Arrow Down to enter a panel, Arrow Up to back out, Escape to close, ⌘K to open search. ARIA attributes (role="menubar", aria-expanded, aria-haspopup) included.
Under Settings → Open dropdown on, switch to Click. Recommended for touch-heavy audiences (mobile-first listings) and pages where mega panels contain interactive content (the viewing-request form).
Both dropdown and mega items support an optional Icon. Icons render as inline SVGs from HubSpot's built-in FontAwesome 5.0.10 set.
home, building, key, map-marker-alt, globe, calculator, chart-line, trophy, gem, check-circle, handshake, briefcase, users, book, file-alt, envelope, phone, search, star, lock.award, palette, microphone-alt, globe-europe — not in the 5.0.10 bundle.propertymm_promo_v1 → propertymm_promo_v2 whenever you ship a new Tuesday listing drop. Old dismissals reset.Pure CSS and vanilla JavaScript. No GSAP, no Swiper, no external dependencies. Same architecture as Mega Menu Pro — battle-tested, SEO-friendly, performant.
getBoundingClientRect() so the wrapper sizes exactly to the active panel (important when one panel is a tabbed filter and the next is an image grid).wrapper.style.height. Form embeds that grow async pick up the new height on the next hover.font fields with load_external_fonts: true, so the Google Fonts <link> is injected automatically.style.* field.