Component
Navigation Eye Candy in Framer
This is a navigation eye candy interaction in Framer, recreated from Adriano Reis’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.
Created by
About the resource
To create this navigation eye candy in Framer, I started with a main component that holds everything together and handles the interaction flow. Inside it, I built three key components. The first one is for the menu items—it includes default and hover states so each item reacts visually when hovered.
Next, I made a separate component to manage the text labels. I stacked all the item texts together in one place and set up variants where one text item is in a selected state and the rest are idle. This way, I can control which text appears highlighted based on interaction.
About the resource
To create this navigation eye candy in Framer, I started with a main component that holds everything together and handles the interaction flow. Inside it, I built three key components. The first one is for the menu items—it includes default and hover states so each item reacts visually when hovered.
Next, I made a separate component to manage the text labels. I stacked all the item texts together in one place and set up variants where one text item is in a selected state and the rest are idle. This way, I can control which text appears highlighted based on interaction.
About the resource
To create this navigation eye candy in Framer, I started with a main component that holds everything together and handles the interaction flow. Inside it, I built three key components. The first one is for the menu items—it includes default and hover states so each item reacts visually when hovered.
Next, I made a separate component to manage the text labels. I stacked all the item texts together in one place and set up variants where one text item is in a selected state and the rest are idle. This way, I can control which text appears highlighted based on interaction.
The six variants of the selected component in Framer.
The six variants of the selected component in Framer.
The six variants of the selected component in Framer.
Finally, I created another component to connect everything. I added the menu items and text labels together and matched their variants. So when I hover over a menu item, its visual state changes and the corresponding text switches to its selected variant.
Finally, I created another component to connect everything. I added the menu items and text labels together and matched their variants. So when I hover over a menu item, its visual state changes and the corresponding text switches to its selected variant.
Finally, I created another component to connect everything. I added the menu items and text labels together and matched their variants. So when I hover over a menu item, its visual state changes and the corresponding text switches to its selected variant.
The six variants of the navigation component in Framer.
The six variants of the navigation component in Framer.
The six variants of the navigation component in Framer.
