5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.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/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:T7a3,

Nav Dock recreates the familiar macOS-style dock interaction with smooth icon magnification based on cursor proximity. As users move across the dock, nearby items scale up naturally using distance-based interpolation and damping for fluid motion.

Each dock item supports an image, label tooltip, and external or internal link, making it perfect for navigation bars, feature menus, or app-style interfaces. The dock panel expands slightly on hover, revealing labels and improving visual focus.

You can fully customize the number of items, icon size, magnification strength, interaction distance, spacing, background blur, border radius, and shadow styling. The component is lightweight, responsive, and works smoothly with mouse-based interactions on desktop layouts.

Key Features

Distance-based icon magnification on hoverSmooth animated scaling with dampingTooltip labels for each dock itemClickable items with link supportConfigurable number of items up to sixAdjustable icon size, spacing, and magnificationDock panel expands on hoverCustom background blur, border radius, and shadow styling

Use Cases

Primary site navigationApp-style dashboardsLanding page feature menusCreative portfolio navigationWeb app launchers

Best Practices / Tips

Use square icons for consistent scaling behaviorKeep magnification between 1.5 and 2 for natural motionLimit item count for cleaner visual focusIncrease panel height slightly if using long labels

What’s Included

One Nav Dock componentUp to six customizable dock itemsHover-based magnification interactionTooltip label systemFull visual and motion controls

Who It’s For

Framer designers building interactive navigationProduct and web app interfacesCreative portfolios and experimental layoutsNo-code builders creating desktop-like UI experiences

5a:[["$","$L5d",null,{"post":{"id":"019dce25-4c2c-7154-b68e-81d98c784446","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c3267055-8b7a-4d57-819b-a04a4ca44a27","name":"Plaiter HQ","slug":"plaiter","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28796/ueg2iX8zqQePJhPoCvXy7ToHbOA-7727zR83zlmJbNcge9kvHaKBCabcdy.jpeg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"pgtf1ilbtGtuMqRwjcn3","resolved":true,"title":"Navigation Dock","body":"$5e","bodyJson":null,"introduction":"A responsive navigation dock ","slug":"navigation-dock","author":{"framerUserId":"c3267055-8b7a-4d57-819b-a04a4ca44a27","name":"Plaiter HQ","slug":"plaiter","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28796/ueg2iX8zqQePJhPoCvXy7ToHbOA-7727zR83zlmJbNcge9kvHaKBCabcdy.jpeg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/pgtf1ilbtGtuMqRwjcn3/navigation-dock-GQVPjuzQPG59Y8x6nd6pFCF7h5Z4el","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-15T01:28:28.975Z","updatedAt":"2026-04-27T08:49:44.293Z","publishedAt":"2026-04-27T08:54:04.076Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://plaiternavdock.framer.website/","price":"10","paymentUrl":"https://plaiter.lemonsqueezy.com/checkout/buy/9ea5edfe-7de6-443b-b8dc-70508578e20c","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"CzSWFgjIovZ22conISDp","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T08:54:04.076Z","updatedAt":"2026-04-27T08:54:04.076Z","reported":false}}],"$L5f"]

Suggested for you