Spotlight Navigation is a premium, cinematic take on mobile and desktop navbars.
The active page is highlighted with a soft spotlight beam — making navigation feel modern, intuitive, and alive.
No-code setup — Add links → Set Active Page → Publish.
Premium hover/motion states that make every click feel intentional
Works beautifully with Templates and multi-page sites
Designed for ultra-smooth mobile UX
Styling (colours, blur, borders, shadows)
Spotlight (intensity, width, height, speed)
Icons (size, active state, hover animation)
Tooltips (font, delay, corner radius)
Copy and paste the component into your project, placing it within the Template (located under the Assets tab).
Select the component, open the Nav Items property, and assign the relevant page link or web URL to each item.
Expose the Active Index property of the Spotlight Navigation across all pages by following these steps:
Select the component within the template at the Desktop breakpoint.
Click the (+) icon beside the Active Index property in the right-hand panel, and choose Create Variable.
On each page, select the Desktop breakpoint and set the appropriate Active Index value in the properties panel. This ensures the spotlight accurately updates its position based on the active page.
Note: Ensure that all pages use the Template feature for proper synchronisation.
Copy and paste the component directly into your project.
Select the component, open the Nav Items property, and add the relevant page links or web URLs.
Duplicate the component across all necessary pages, ensuring the navigation links are correctly configured.
On each page, select the component and set the Active Index property in the right-hand panel to reflect the current active page.
Copy the URL and paste it into your Framer project to import it.
Aviral Lakhanpaul
