5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T66a,

Push Menu Navigation is a responsive Framer navigation component with a right-side, off-canvas menu that pushes your page aside. Built with editable native layers and Framer Motion, it pairs staggered menu links with customizable page-push animation. Close with Escape or a tap on the dimmed backdrop, while the page push respects reduced-motion preferences.

How to Use

Place the navigation at the top of your page, fix it in position above your content, and choose a closed desktop or phone variant.
Group your page sections in one stack, keeping the navigation outside it; copy the supplied override code into a new Framer override file and apply it to the content stack once.
Connect your page, email, phone and social links, then edit the native layers to customize the logo, labels and typography.
Choose light or dark header styling, transparent or solid variants, corner radius, link hover color and page dimming; adjust desktop panel width or phone width inside the component.
Tune opening and closing page-push transitions, including timing, easing or spring behavior; edit menu reveal and link stagger timing separately on the canvas.
Preview or publish to test the menu, links and responsive layouts, as the page-push effect does not run on the design canvas.

Ideal Use Cases

Push Menu Navigation works well for: • Designer and photographer portfolios • Creative agency and studio websites • Brand sites with prominent contact and social links • Framer projects needing responsive sidebar navigation

5a:[["$","$L5d",null,{"post":{"id":"01a0a491-f347-745c-9cde-6249b38695ef","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"toIrVRjeQ9xBrahWUtdM","resolved":true,"title":"Push Menu Navigation","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Push Menu Navigation is a responsive Framer navigation component with a right-side, off-canvas menu that pushes your page aside. Built with editable native layers and Framer Motion, it pairs staggered menu links with customizable page-push animation. Close with Escape or a tap on the dimmed backdrop, while the page push respects reduced-motion preferences."}]},{"type":"paragraph","content":[{"type":"text","text":"How to Use"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Place the navigation at the top of your page, fix it in position above your content, and choose a closed desktop or phone variant."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Group your page sections in one stack, keeping the navigation outside it; copy the supplied override code into a new Framer override file and apply it to the content stack once."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connect your page, email, phone and social links, then edit the native layers to customize the logo, labels and typography."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose light or dark header styling, transparent or solid variants, corner radius, link hover color and page dimming; adjust desktop panel width or phone width inside the component."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tune opening and closing page-push transitions, including timing, easing or spring behavior; edit menu reveal and link stagger timing separately on the canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview or publish to test the menu, links and responsive layouts, as the page-push effect does not run on the design canvas."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"Ideal Use Cases"}]},{"type":"paragraph","content":[{"type":"text","text":"Push Menu Navigation works well for: • Designer and photographer portfolios • Creative agency and studio websites • Brand sites with prominent contact and social links • Framer projects needing responsive sidebar navigation"}]}]},"introduction":"Slide-out menu with page push","slug":"push-menu-navigation","author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0377da32-5157-43ad-9c57-e949e915db9e/01a0a491-90a6-710e-9401-883a70db7fd4.png","metadata":{"tint":{"h":60,"s":77,"l":34},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-09-15T10:17:02.998Z","updatedAt":"2026-09-16T13:42:19.414Z","publishedAt":"2026-09-15T10:17:02.995Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Push-Menu-Navigation-sAkTG0.js@LpbvpeiV3XpWuXJY7npR","previewUrl":"https://push-menu.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"LpbvpeiV3XpWuXJY7npR","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-15T10:17:03.559Z","updatedAt":"2026-09-15T10:17:03.559Z","reported":false}}],"$L5f"]

Suggested for you