Spotlight Navigation
A premium navigation bar with a cinematic spotlight effect, smooth animations, haptic feedback, tooltips, and full customisation, perfect for modern websites.
Make it with Workshop
Build your own component with AI
A premium navigation bar with a cinematic spotlight effect, smooth animations, haptic feedback, tooltips, and full customisation, perfect for modern websites.
Make it with Workshop
Build your own component with AI
Spotlight Navigation is a modern, premium alternative to traditional navbars. Each active icon is illuminated by a sleek spotlight beam, creating a cinematic, high-end visual experience. The soft glow, blur, and depth bring a realistic “stage light” feel—instantly elevating your UI.
Smooth animations
Haptic feedback on touch devices
Tooltips
Shimmer loading effect
Hover effects
Responsive and light-weight
• Transition effects (customise animation values)
• Haptic feedback strength (touch devices)
• Add unlimited navigation items
• Spotlight positioning
• Background color & blur intensity
• Border color/thickness/radius
• Icon size & color
• Spotlight color, thickness, width, height
• Shadow intensity
• Tooltip delay
• Tooltip font
• Tooltip text color
• Tooltip background color
• Tooltip box radius
• Tooltip shadow
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.
