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:Ta3a,

CardNav Pro

Create a premium navigation experience with CardNav Pro, a fully responsive expandable card navigation component built specifically for Framer. Designed for modern websites, portfolios, agencies, startups, SaaS products, and premium brands, this component transforms a traditional navigation menu into an engaging interactive experience.

Instead of standard dropdowns, CardNav Pro expands into beautifully designed content cards with smooth animations, customizable layouts, and native Framer controls—allowing anyone to build a professional navigation system without writing code.

Features

Premium expandable card navigation
Fully responsive layouts for Desktop, Tablet, and Phone
Dedicated Open and Closed states for every breakpoint
Native Framer Components, Variants, and Interactions
Smooth expand and collapse animations
Dynamic cards that automatically adapt to content
Unlimited navigation links
Automatic equal-height cards based on the tallest card
Built with Stacks and Auto Layout principles
Animated gradient backgrounds
Fully customizable CTA button
Optional marquee hover animation
Multiple hover animation styles
Native Framer Property Controls
Editable typography using Framer Font Controls
Custom colors, spacing, borders, shadows, and radius
Easy to customize without touching code

Fully Customizable

Every part of the navigation can be edited directly from the Framer Properties panel.

Customize:

Logo
Navigation items
Card titles
Card descriptions
Links
CTA button
Colors
Typography
Border radius
Padding
Spacing
Shadows
Hover animations
Gradient backgrounds
Animation settings

Responsive by Design

CardNav Pro is optimized for every screen size.

Includes dedicated layouts for:

Desktop
Tablet
Phone

Need help or have a question?

Feel free to reach out anytime:

📧ah0265382@gmail.com

5a:[["$","$L5d",null,{"post":{"id":"019fc7bf-be6d-728b-823b-4bd32fa67e53","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"fcbcfe9e-7e4d-4f9f-8be0-624628f8db4b","name":"Carebo","slug":"carebo-x","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/fcbcfe9e-7e4d-4f9f-8be0-624628f8db4b/vl7colv8","followed":false,"followsYou":false},"media":[],"resources":[{"id":"IkQO94HFHrvgsWMn2Ihm","resolved":true,"title":"Card Navigation","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"CardNav Pro"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Create a premium navigation experience with "},{"type":"text","text":"CardNav Pro","marks":[{"type":"bold"}]},{"type":"text","text":", a fully responsive expandable card navigation component built specifically for Framer. Designed for modern websites, portfolios, agencies, startups, SaaS products, and premium brands, this component transforms a traditional navigation menu into an engaging interactive experience."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of standard dropdowns, CardNav Pro expands into beautifully designed content cards with smooth animations, customizable layouts, and native Framer controls—allowing anyone to build a professional navigation system without writing code."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium expandable card navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive layouts for Desktop, Tablet, and Phone"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dedicated Open and Closed states for every breakpoint"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native Framer Components, Variants, and Interactions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth expand and collapse animations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic cards that automatically adapt to content"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Unlimited navigation links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic equal-height cards based on the tallest card"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built with Stacks and Auto Layout principles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated gradient backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable CTA button"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional marquee hover animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple hover animation styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native Framer Property Controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editable typography using Framer Font Controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom colors, spacing, borders, shadows, and radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easy to customize without touching code"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Fully Customizable"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Every part of the navigation can be edited directly from the Framer Properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Customize:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Logo"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Navigation items"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card titles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card descriptions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CTA button"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shadows"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover animations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gradient backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation settings"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Responsive by Design"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"CardNav Pro is optimized for every screen size."}]},{"type":"paragraph","content":[{"type":"text","text":"Includes dedicated layouts for:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Desktop"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tablet"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Phone"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Need help or have a question?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Feel free to reach out anytime:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"e-mail","emoji":"📧"}},{"type":"text","text":"ah0265382@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:ah0265382@gmail.com","target":"_blank"}},{"type":"bold"}]}]}]},"introduction":"Premium Navigation Component.","slug":"card-navigation","author":{"framerUserId":"fcbcfe9e-7e4d-4f9f-8be0-624628f8db4b","name":"Carebo","slug":"carebo-x","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/fcbcfe9e-7e4d-4f9f-8be0-624628f8db4b/vl7colv8","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/fcbcfe9e-7e4d-4f9f-8be0-624628f8db4b/019fc7d5-4429-743c-af56-64e11a21772d.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1376,"height":768}}],"post":null,"createdAt":"2026-08-03T13:10:59.239Z","updatedAt":"2026-08-03T13:34:40.962Z","publishedAt":"2026-08-03T13:10:59.233Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://creative-someone-506618.framer.app/","price":"5","paymentUrl":"https://carebo.lemonsqueezy.com/checkout/buy/b7535c47-756b-4f79-b85c-9e5e19158332","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"I48HEfgRp8rwFgEs25t1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-03T13:10:59.951Z","updatedAt":"2026-08-03T13:10:59.951Z","reported":false}}],"$L5f"]

Suggested for you