Two Step Navigation is an animated navigation component designed for Framer websites.
It begins as a compact navigation bar with a logo and hamburger toggle. When the toggle is clicked, the component expands into a full navigation panel that reveals large navigation links, optional visual imagery, and secondary links such as social media.
The transition between closed and open states is smooth and animated, creating a modern navigation experience commonly used on agency websites, portfolio sites, and interactive landing pages.
Navigation links animate into view while the container expands, creating a layered motion effect.
The component integrates with Framer’s router, allowing internal links to navigate between pages smoothly.
Two Step Navigation is fully responsive and adapts automatically to desktop and mobile screen sizes.
Features
The component starts as a compact navigation bar and expands into a full menu when the hamburger toggle is clicked.
The expanded panel reveals navigation links, social links, and optional visual content.
Opening the navigation triggers layered animations:
• the navigation container expands• the background overlay fades in• navigation links animate into view
These animations create a polished browsing experience.
Navigation links include a vertical slide hover animation.
When users hover over a link, the text transitions upward and reveals a duplicate label beneath it.
This interaction pattern is commonly used on modern portfolio and agency websites.
You can define your own navigation links directly from the property panel.
Each link supports:
• custom label text• internal page link• external URL• option to open in a new tab
The navigation includes a secondary link area for social media or external resources such as:
• Instagram• LinkedIn• Twitter / X• Dribbble• GitHub
You can display an optional image inside the expanded navigation panel.
This area works well for:
• brand imagery• portfolio previews• featured visuals
The image automatically hides on smaller screens to keep the layout clean.
Upload your own logo or use the default SVG logo.
The logo can link to any page such as the homepage.
You can customize the navigation directly from Framer:
• navigation background color• text color• divider color• hamburger icon color• logo size• navigation width• link spacing
This allows the component to match any website design.
The navigation adapts automatically to smaller screens.
On mobile:
• the image column hides• links remain easy to tap• layout adjusts for smaller viewports
Property Controls
Two Step Navigation includes several adjustable properties.
Define the main navigation links.
Each link supports:
• label text• internal links• external URLs• open in new tab
Add social media or external links.
Upload a custom logo.
Controls the size of the logo in the navigation bar.
Optional visual image displayed inside the menu.
Sets the navigation background color.
Controls the color of navigation labels.
Adjusts the hamburger menu size.
Controls the maximum width of the navigation container.
Adjusts spacing between navigation links.
How to Use
Paste the component into a Template page in your Framer project.
Then apply this template to every page where the navigation should appear.
Using a template ensures the navigation stays consistent across your entire site.
After applying the template, edit the navigation links and settings only on the template page.
All pages using the template will automatically update.
Use the property panel to define your navigation links and URLs.
Add optional social links such as Instagram, LinkedIn, or Twitter.
Upload your brand logo or use the default SVG logo.
Adjust colors, spacing, and layout using the property controls.
Ideal Use Cases
Two Step Navigation works well for:
• portfolio websites• agency websites• creative studio sites• product landing pages• startup websites
It provides a modern navigation experience with smooth animations and flexible layout options.
Daniyal Habib
