Frosted Navigation
Interactive dropdown menu with image previews and subtle text effects. Fully customizable via variables and optimized for both desktop and mobile.
Overview
Interactive dropdown menu with image previews and subtle text effects that bring navigation to life. Fully customizable via variables and optimized for both desktop and mobile.
Features
Image previews for submenu items
Background adapts to the active image, creating a subtle glow effect
Smooth in and out hover animations for submenu cards
Combines three components: Nav Link, Menu, and Card
Use components together or separately to build custom navigation layouts
CustomizationThe component is fully customizable via variables:
Menu background color, padding, corner radius, border, and corner rectangles
Link font styling, font size, and hover states
Submenu card gap, padding, image, border, radius, and more
Link behavior: URLs, open in new tab, smooth scroll
Custom SVG icons for cards and dropdown indicators
Insprired by markopolo
