Menu + Drop Down

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

Customization

The 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