5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0149c3aptki2q.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/2s2cwydj9lmys.js","/creators-assets/_next/static/immutable/chunks/2n4hq0sordoe3.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0dst_b4k0u8kl.js","/creators-assets/_next/static/immutable/chunks/380lj13lztxlh.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/202b1r_evm3sb.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/0hhnnecj8-hto.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/3a7ilx8tflzu0.js","/creators-assets/_next/static/immutable/chunks/3b1c4c_-zf-r8.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/1jvl5pseyb1ld.js","/creators-assets/_next/static/immutable/chunks/1602xfiu5d3wp.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/1tmy_9cuep5o7.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T747,

A navbar with a little more gravity.

Gravity Pill Navbar is an interactive navigation component built around a smooth expanding top menu and playful physics-based navigation pills.

Open the navbar and each menu item drops naturally into place. Grab a pill, drag it around or throw it across the menu — gravity brings it back while keeping the interaction fast and responsive.

✨ What’s inside

Physics-based falling navigation pills
Drag, throw, bounce and collision interactions
Smooth expanding top-attached navbar
Adjustable throw return speed
Individual styling for every pill
Custom fill, text, font, padding and radius per item
Border, shadow and hover controls
Editable logo and menu trigger
Custom open / closed navbar sizing
Adjustable gravity, bounce, friction and air resistance
Click-outside and Escape-to-close behavior
Reduced-motion support
Responsive Framer-ready structure
Static-render friendly setup

Made for

Creative portfolios, studio websites, personal sites, experimental landing pages and interactive Framer projects.

Easy to customize

Change every navigation pill independently, upload your own logo, adjust the navbar dimensions and fine-tune the entire physics system directly from Framer.

Keywords: gravity navbar, falling pill navbar, animated navbar, interactive navigation, physics menu, draggable menu, pill navigation, creative navbar, portfolio navigation, expanding navbar, Framer navbar, Framer component, interactive menu, falling menu, motion navigation

5a:[["$","$L5d",null,{"post":{"id":"01a0d330-de5f-724e-8dac-b45b1ac04e7a","title":null,"body":"

New component!!

What if your navbar had gravity?

Falling pills, drag + throw physics, collisions and a smooth expanding navbar all customizable directly in Framer.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New component!! "}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What if your navbar had gravity?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Falling pills, drag + throw physics, collisions and a smooth expanding navbar all customizable directly in Framer."}]}]},"author":{"framerUserId":"24c34ffc-1b8b-46e6-a055-7de3bb94d181","name":"hayriye akgüller","slug":"hayriye-akguller","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/24c34ffc-1b8b-46e6-a055-7de3bb94d181/faejz9hw","followed":false,"followsYou":false},"media":[],"resources":[{"id":"SpCt3GghL9SooYG0Z8hs","resolved":true,"title":"Gravity Pill Navbar","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A navbar with a little more gravity.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Gravity Pill Navbar is an interactive navigation component built around a smooth expanding top menu and playful physics-based navigation pills."}]},{"type":"paragraph","content":[{"type":"text","text":"Open the navbar and each menu item drops naturally into place. Grab a pill, drag it around or throw it across the menu — gravity brings it back while keeping the interaction fast and responsive."}]},{"type":"paragraph","content":[{"type":"text","text":"✨ "},{"type":"text","text":"What’s inside","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Physics-based falling navigation pills"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag, throw, bounce and collision interactions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth expanding top-attached navbar"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable throw return speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Individual styling for every pill"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom fill, text, font, padding and radius per item"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border, shadow and hover controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editable logo and menu trigger"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom open / closed navbar sizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable gravity, bounce, friction and air resistance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click-outside and Escape-to-close behavior"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive Framer-ready structure"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-render friendly setup"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Made for","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios, studio websites, personal sites, experimental landing pages and interactive Framer projects."}]},{"type":"paragraph","content":[{"type":"text","text":"Easy to customize","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Change every navigation pill independently, upload your own logo, adjust the navbar dimensions and fine-tune the entire physics system directly from Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Keywords:","marks":[{"type":"bold"}]},{"type":"text","text":" gravity navbar, falling pill navbar, animated navbar, interactive navigation, physics menu, draggable menu, pill navigation, creative navbar, portfolio navigation, expanding navbar, Framer navbar, Framer component, interactive menu, falling menu, motion navigation"}]},{"type":"customHeading","attrs":{"level":2}}]},"introduction":"Falling Pill Menu","slug":"gravity-pill-navbar","author":{"framerUserId":"24c34ffc-1b8b-46e6-a055-7de3bb94d181","name":"hayriye akgüller","slug":"hayriye-akguller","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/24c34ffc-1b8b-46e6-a055-7de3bb94d181/faejz9hw","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/24c34ffc-1b8b-46e6-a055-7de3bb94d181/01a0d330-5731-7245-874c-2e7be03b09ee.png","metadata":{"tint":{"h":210,"s":29,"l":59},"width":2938,"height":1596}}],"post":null,"createdAt":"2026-09-24T11:33:09.757Z","updatedAt":"2026-09-24T13:01:23.718Z","publishedAt":"2026-09-24T11:33:09.754Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://encouraging-party-073061.framer.app/#about","price":"8","paymentUrl":"https://hugline-studio.lemonsqueezy.com/checkout/buy/47050124-b580-44a0-a579-4117d3396aba","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"LhAQxr0rD9RvgwVlVmwV","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-24T11:33:10.367Z","updatedAt":"2026-09-24T11:33:10.367Z","reported":false}}],"$L5f"]

Suggested for you