Ribbon Menu — Pull-to-Open Navigation

Ribbon Menu turns navigation into a folded strip of paper. Pull the tab and the whole ribbon opens with your hand. Let go and it settles. Each fold leads to a page, project or section of your site.

What is included

• One editable Framer Code Component with one to six navigation links.
• Connected folds, direct dragging, and click-to-open interaction.
• Horizontal, vertical and compact layouts based on the available frame.
• Editable labels, captions, links, colors and typography.
• Keyboard navigation, reduced-motion handling and a quiet editor preview.
• Private versioned installation link, complete source, installation guide, control reference, license, credits and changelog in one ZIP.

Make it yours

Choose each item's actual destination with Navigation → Link in the properties panel. Destinations can start empty; sample labels do not create pages. Change the paper color, replace the page names and choose your fonts. Captions are optional. You can start the ribbon open and choose whether it folds away after a link is selected. The interface labels are editable too.

How it fits

A wide frame keeps the ribbon horizontal. A narrow, tall frame lets it unfold downward. If the original folds cannot fit at a usable size, a simple button and page selector keep navigation available. Layout depends on both frame dimensions and the number of links.

Delivery and setup

One download contains a private, versioned Component URL. Copy it from the included installation file and paste it onto your Framer canvas. Then choose each destination in Navigation → Link and edit colors and type in the property panel. Test every destination in Preview before publishing your site.

The self-contained RibbonMenu.tsx source is included as an editable fallback, along with English documentation. The guide explains both installation methods. Every setting listed above is available in the properties panel.

Requirements and limits

• A Framer project and a browser that supports modern web navigation.
• Give the component a real width and height. The guide starts at 1100 × 520 px; compact navigation needs at least 120 px of height.
• Use concise page names and recheck long text after changing fonts or size.
• Canvas and exports show a static navigation layout, not moving folds.
• This is inline navigation, not a full-screen overlay or mega menu.
• Pages, CMS collections, hosting, checkout and analytics are not included.
• No API key, photo library or separate backend is required.

License and support

One purchase covers one commercial website or end product for you or one client. You may edit the included source for that project. Redistribution, resale, source sharing, template resale and multi-project use are not included.

For setup questions or defects, contact hello@usesolvekit.com. No fixed update schedule or future major version is promised. Statutory rights remain unaffected.

Refund policy

Digital purchases are normally final after access or download, except where applicable law requires otherwise. If the product is defective or materially different from this description, contact support so the issue can be resolved.