Mega Menu Header

A complete navigation menu for property sites, built natively in Framer with no code.

On desktop, Buy and Neighborhoods open full width panels on hover. The Buy panel splits into two link columns plus three featured listing cards with price overlays. The Neighborhoods panel pairs a two column area list with a featured guide card.

On tablet and phone the same menu collapses to a single menu button that opens a full width drawer, where Buy and Neighbourhoods expand as accordions revealing exactly the same content. The drawer overlays the page instead of pushing it down, and scrolls on its own when both sections are open.

Everything is editable from the properties panel. 70 controls cover every label, every link, every image, every price, every piece of body copy and the four core colors, so you never have to open the component to rebrand it.

Colors work two ways. Accent, card background, muted surface and icon color are per instance controls. Text, dividers and hover states follow Framer color styles, so restyling those recolors them everywhere at once.

Built with Framer color styles and text styles throughout, so it picks up cleanly in any project. Five variants, real hover and tap states, alt text on every image and an accessible name on the menu button.

What is inside

• 5 variants: Desktop, Tablet, Phone, Tablet Open, Phone Open

• 2 hover mega panels as native relative overlays, plus a full width tap drawer

• 2 nested accordion components inside the drawer

• 70 editable properties: 39 text, 23 link, 4 image, 4 color

• 8 color styles, 14 text styles, 1 link style

• Lucide icons, Inter typeface