Minimal Navbar is a clean, distraction-free navbar with a blur backdrop on open and smooth micro-animations that just feel right.
Framer-native — no code components, no dependencies
Blur backdrop with smooth open and close behaviour
Fully customizable to match your brand
Clearly named layers so you can find your way around instantly if you choose to edit the component.
Responsive out of the box so it looks right on every device your visitors land on.
The component you receive is the Backdrop + Navbar — the Navbar lives inside it, so you only need to drop in one component to get the full setup.
Select the Backdrop component and set the width to Fill and the height to 100vh (Viewport). This ensures that the blur effect covers the full screen when the menu opens.
Already inside the Backdrop, no extra setup needed. It sits full width by default with a max width of 440px, and centered.
To edit the max width of the navbar or to use Nabar separately, unlink the component and customize accordingly.
NOTE:
The bakcground image on the preview site is a photo sourced from Cosmos. If you are the owner and would like it removed, please reach out.
Minimal Navbar is a clean, distraction-free navbar with a blur backdrop on open and smooth micro-animations that just feel right.
Framer-native — no code components, no dependencies
Blur backdrop with smooth open and close behaviour
Fully customizable to match your brand
Clearly named layers so you can find your way around instantly if you choose to edit the component.
Responsive out of the box so it looks right on every device your visitors land on.
The component you receive is the Backdrop + Navbar — the Navbar lives inside it, so you only need to drop in one component to get the full setup.
Select the Backdrop component and set the width to Fill and the height to 100vh (Viewport). This ensures that the blur effect covers the full screen when the menu opens.
Already inside the Backdrop, no extra setup needed. It sits full width by default with a max width of 440px, and centered.
To edit the max width of the navbar or to use Nabar separately, unlink the component and customize accordingly.
NOTE:
The bakcground image on the preview site is a photo sourced from Cosmos. If you are the owner and would like it removed, please reach out.
