About Navbar 02
Live Preview: https://navbar02.framer.website/
About Navbar 02
Navbar02 is a premium floating capsule navigation component. It starts as a sleek, shrink-to-fit pill centered at the top of the page — logo on the left, “Menu” button on the right. One click expands the same capsule in place into a taller rounded panel with a clean stacked link list. No dropdown, no overlay, no layout shift. Perfect for modern portfolios, agencies, SaaS sites and high-end brand experiences.
Key Features
Floating shrink-to-fit capsule that expands in-place
Optional logo: pure text or Image/SVG upload with adjustable height
Three ready themes: Glass (blur), Paper (light) and fully Custom
Sticky mode + precise top offset control
Full Framer native Font pickers (extended controls) for logo, nav items and button
Complete color system — text, logo, nav links, button background & text
Accessibility-first: proper ARIA (aria-expanded, aria-haspopup, aria-controls), focus return, visible focus rings and prefers-reduced-motion
SEO-optimized with Schema.org SiteNavigationElement microdata so Google understands the navigation
Escape key + outside-click to close
Static-renderer safe — no animations or observers run in Framer canvas/export
Fully responsive — adapts to any screen width without horizontal scroll
Use Cases
Creative agency & studio websites
Portfolio & personal branding sites
SaaS marketing & product landing pages
Fashion, lifestyle and editorial magazines
Architecture & interior design portfolios
Tech startups and app showcase pages
Photography and visual storytelling sites
Event, conference and festival websites
E-commerce brand headers
Multi-language / international projects (RTL ready)
Keywords
floating navbar, capsule menu, expand in-place navigation, framer navbar component, sticky floating nav, glassmorphism navbar, paper theme menu, custom color navbar, image logo navbar, svg logo framer, accessible navigation, rtl navbar, seo schema navigation
