5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:T972,

About

Fe Mega Nav is a split hero with a mega menu built into it. Header and hero ship as one piece, so they always line up.

Two full-bleed image panels sit under the nav bar, each with its own headline and button. Drop it on a storefront, lookbook, or brand homepage and the top of your page is done. No nested frames, no interactions to wire up.

What it does

Hover a nav item and the menu opens full width, with its own category list and a Shop all link. On the right sits a feature card whose image crossfades as you move between categories. Behind it, the hero dims and blurs so nothing competes with the open menu.

It measures its own container, not the browser window, so it keeps working inside nested Framer breakpoints. Two panels on desktop, one on tablet, hamburger on phone.

What you can customize

All of it, from the properties panel. No code needed.

Split hero: image, title, button, panel size and hero height per panel
Mega menu: separate categories and content per nav item, plus blur and dim
Feature card: image, title, subtitle, button, crossfade handled for you
Branding: logo as text or image, plus a cart or bag label
Colour and type: every colour, nav font size, button size, corner radius

Setup

Insert the component
Set Width to Fill, then Height to your hero height
Swap images and text in the properties panel

Step 2 is the one people skip. The component sizes to its container, so anything but Fill and the panels won't span the page.

Great for

Fashion and apparel, streetwear and lifestyle, luxury and jewellery, beauty and skincare, lookbooks, editorial e-commerce, boutiques, home decor, agency sites and premium Framer templates.

Share your build

Built something with it? Send it over, we like seeing where these land.

Need help?

Get in touch, we usually reply within one business day. More Framer ecommerce work at https://fecommerce.co/

59:[["$","$L5c",null,{"post":{"id":"019fa3d3-edf3-759a-bd11-2989589e1501","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf","name":"FeCommerce","slug":"fecommerce","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1522163/avatar-O3mD0A25QB3hEFuyWMXPGD4iqS1Dlf.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"eLy3hia946kR6hmAxhPe","resolved":true,"title":"Fe Mega Nav","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Fe Mega Nav is a split hero with a mega menu built into it. Header and hero ship as one piece, so they always line up."}]},{"type":"paragraph","content":[{"type":"text","text":"Two full-bleed image panels sit under the nav bar, each with its own headline and button. Drop it on a storefront, lookbook, or brand homepage and the top of your page is done. No nested frames, no interactions to wire up."}]},{"type":"paragraph","content":[{"type":"text","text":"What it does","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Hover a nav item and the menu opens full width, with its own category list and a Shop all link. On the right sits a feature card whose image crossfades as you move between categories. Behind it, the hero dims and blurs so nothing competes with the open menu."}]},{"type":"paragraph","content":[{"type":"text","text":"It measures its own container, not the browser window, so it keeps working inside nested Framer breakpoints. Two panels on desktop, one on tablet, hamburger on phone."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"All of it, from the properties panel. No code needed."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Split hero: image, title, button, panel size and hero height per panel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mega menu: separate categories and content per nav item, plus blur and dim"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Feature card: image, title, subtitle, button, crossfade handled for you"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Branding: logo as text or image, plus a cart or bag label"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Colour and type: every colour, nav font size, button size, corner radius"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Setup","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Insert the component"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set Width to Fill, then Height to your hero height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Swap images and text in the properties panel"}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"Step 2 is the one people skip. The component sizes to its container, so anything but Fill and the panels won't span the page."}]},{"type":"paragraph","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Fashion and apparel, streetwear and lifestyle, luxury and jewellery, beauty and skincare, lookbooks, editorial e-commerce, boutiques, home decor, agency sites and premium Framer templates. "}]},{"type":"paragraph","content":[{"type":"text","text":"Share your build","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built something with it? Send it over, we like seeing where these land. "}]},{"type":"paragraph","content":[{"type":"text","text":"Need help?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Get in touch","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.fecommerce.co/contact","target":"_blank"}}]},{"type":"text","text":", we usually reply within one business day. More Framer ecommerce work at "},{"type":"text","text":"https://fecommerce.co/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://fecommerce.co/","target":"_blank"}}]}]}]},"introduction":"Fashion Split Hero & Mega Menu","slug":"fe-mega-nav","author":{"framerUserId":"7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf","name":"FeCommerce","slug":"fecommerce","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1522163/avatar-O3mD0A25QB3hEFuyWMXPGD4iqS1Dlf.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf/019fa3d3-983d-7199-a410-7e5ec14fb652.png"}],"post":null,"createdAt":"2026-07-27T13:46:42.475Z","updatedAt":"2026-07-27T14:19:26.034Z","publishedAt":"2026-07-27T13:46:42.471Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.click/m/FeMegaNav-XijVzn.js@DHS9c1beKlL8xBaYHELv","previewUrl":"https://accessible-umbrella-449047.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"DHS9c1beKlL8xBaYHELv"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":30,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-27T13:46:43.059Z","updatedAt":"2026-07-27T13:46:43.059Z","reported":false}}],"$L5e"]

Suggested for you