Component Details
NavMenuBox is built as a single self-contained Framer code component powered by React and Framer Motion. It is designed to drop into any Framer project without configuration, exposing all visual and structural properties through Framer's native Property Controls panel so designers can customize everything without touching the code.
Trigger Button The menu is activated by a pill-shaped button that accepts full control over its label, background color, text color, font size, and font family. The icon toggles between a plus and a close symbol to communicate state clearly.
Dropdown Box On click, an animated box appears below the button with a scale and fade entrance powered by Framer Motion's AnimatePresence. The box is divided into two panels. The left panel holds the navigation links and the right panel holds the image slider. On mobile the layout stacks vertically, navigation on top and the slider below, matching the behavior shown in the reference design.
Navigation Links Each menu item is an object containing a label and an href. Items animate in sequentially with a staggered delay on open. Hovering any item reduces its opacity for a clean interactive feel. The full array of items is editable directly from the Property Controls panel using Framer's Object array control.
Image Slider The slider panel accepts an array of images and cycles through them automatically every three seconds. Dot indicators at the bottom allow manual navigation. The panel gracefully handles zero images with an empty state placeholder.
Responsive Behavior The component listens to window resize events and switches layout at a configurable breakpoint, defaulting to 768px. The mobile layout reduces the box width to 280px, slightly decreases the font size, and compresses the slider height to 160px to fit smaller screens comfortably.
Property Controls Every visual property is exposed to Framer's inspector panel including button label, button background, button text color, button font size, menu background, menu text color, menu font size, mobile breakpoint, menu items array, and images array. This means the component behaves like a native Framer component with no code editing required after installation.
Khalid Abukotsh
