Premium Navigation
A premium full-screen navigation with animated link effects, scroll-aware behavior, SVG logo processing, & customizable hover interactions, built for high-end Framer websites.
Make it with Workshop
Build your own component with AI
A premium full-screen navigation with animated link effects, scroll-aware behavior, SVG logo processing, & customizable hover interactions, built for high-end Framer websites.
Make it with Workshop
Build your own component with AI
A bold, full-screen navigation built for modern Framer sites that care about motion, typography, and polish.
This component combines a clean sticky navbar with a cinematic menu reveal. It reacts to scroll, feels responsive to every interaction, and keeps the focus where it belongs—your content. Hover animations are built in, transitions are smooth by default, and everything is easy to control directly from Framer.
It’s designed to feel premium without being heavy. Drop it in, adjust a few settings, and you instantly get a navigation that looks intentional and well-crafted.
Perfect for portfolios, studios, landing pages, and brand-driven sites that need more than a basic menu.
Control your menu items, URLs, and current page state.
Upload an image or SVG, set link URL, size, and colors for open and closed states.Option to preserve original SVG colors or override them.
Adjust size and colors for open and closed states.
Choose between multiple built-in hover styles:
Slide Up
Chars Reveal
Line Sweep
Center Line
Brackets
Marquee
Sticky
Hide on scroll
Menu background color
Scrolled navbar background
Link and active link colors
Full font control with responsive scaling for both main links and bottom text.
Navbar padding (X & Y)
Menu item spacing
Responsive font size factor
Custom bottom-left and bottom-right text inside the menu.
Full-screen animated menu with smooth open and close
Sticky or hide-on-scroll navbar behavior
Multiple hover effects (slide, chars, underline, center, brackets, marquee)
Scroll-aware padding for a tighter look while scrolling
SVG or image logo support with open/close color control
Fully responsive typography and spacing
Keyboard support (ESC to close)
Clean, performance-friendly animations
Copy the component link
Go to your Framer project canvas
Paste the link using CTRL / CMD + V or right-click → paste(the component will be added automatically)
Move the component above everything in your layers
Set the component width to 100% or 100vw
Set z-index to 10 in Framer properties(make sure no other element has a higher z-index, except loaders)
Upload your logo, adjust links, colors, and settings—done 🎉
