Interaction
Floating Navigation in Framer
This is a floating navigation interaction in Framer, recreated from Petr Knoll’s original work. Feel free to remix the project to explore how it's built without any code, or copy the component directly into your Framer project.
About the resource
To create this navigation component, I started by creating two variants for the navigation bar: "Default" and "Active," which are triggered by an on-click interaction. I also added a hover state for the navigation bar, where the background slightly overflows. This effect was achieved by simply increasing the padding.
About the resource
To create this navigation component, I started by creating two variants for the navigation bar: "Default" and "Active," which are triggered by an on-click interaction. I also added a hover state for the navigation bar, where the background slightly overflows. This effect was achieved by simply increasing the padding.
About the resource
To create this navigation component, I started by creating two variants for the navigation bar: "Default" and "Active," which are triggered by an on-click interaction. I also added a hover state for the navigation bar, where the background slightly overflows. This effect was achieved by simply increasing the padding.
The default, hover and active variant of the navigation component.
The default, hover and active variant of the navigation component.
The default, hover and active variant of the navigation component.
In the "Active" state, I included the menu items, each of which is a separate component with its own hover state. These hover states feature a subtle text animation, adding an interactive and polished touch to the overall design.
In the "Active" state, I included the menu items, each of which is a separate component with its own hover state. These hover states feature a subtle text animation, adding an interactive and polished touch to the overall design.
In the "Active" state, I included the menu items, each of which is a separate component with its own hover state. These hover states feature a subtle text animation, adding an interactive and polished touch to the overall design.
The default and hover variant of the menu item component.
The default and hover variant of the menu item component.
The default and hover variant of the menu item component.
