Show a custom, built-in-Webflow context menu when your element is right-clicked.
View demo projectCréation du scénario Make.com
1. Téléchargez le modèle JSON ci-dessous pour commencer.
2. Naviguez jusqu'à Make.com et créez un nouveau scénario...
![](https://cdn.prod.website-files.com/5bbfaf3252489b4c484ba9b9/648c5b1fbc7994f029551c78_Screen%20Shot%202023-06-16%20at%208.51.21%20AM.jpg)
3. Cliquez sur la petite boîte avec trois points, puis sur Import Blueprint...
![](https://cdn.prod.website-files.com/5bbfaf3252489b4c484ba9b9/648c5b29e80e81cad00f11c8_Screen%20Shot%202023-06-16%20at%208.51.33%20AM.jpg)
4. Téléchargez votre fichier et voilà ! Vous êtes prêt à relier vos propres comptes.
Besoin d'aide avec ce MemberScript ?
All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.
Join the 2.0 SlackHow to Build a Custom Context Menu in Webflow
Memberscripts needed
Tutorial
Cloneable
![](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/65fb01551ab4ef28cca02a5b_Screenshot%202024-03-20%20at%2016.31.15.webp)
Why/When would need to Build a Custom Context Menu in Webflow?
- Offer visitors customized and potentially more relevant context menus on your website.
You’ve probably seen on some sites (even on Webflow) that when you right click inside them, instead of getting the default browser context menu, there’s a custom one with more specific and relevant options available.
You can do the same for your website visitors and this guide will show you just how to do that on Webflow.
Building a custom context menu in Webflow
To build a custom context menu on a Webflow site, we’re going to use MemberScript #89 – Custom Context Menus. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Setting it up
The first thing you’ll need to do is put the element that will trigger the custom context menu inside a wrapper and set the wrapper’s position to relative.
Next, you’ll need to create your custom context menu, add all the different items, links, and icons you want, then put it inside a wrapper and set the wrapper’s position to absolute.
Now add a CSS combo class to the context menu called “visible” and add a z-index value that is higher than 0.
Then remove that combo class, add another one called “hidden” and set its display to none. This will be the combo class you use when publishing your page.
Now going back to the trigger element (not its wrapper), add the following attribute to it:
- ms-code-context-item=”1”
Now add the following attribute to the context menu:
- ms-code-context-menu=”1”
You can have multiple instances of custom context menus on a page. Each trigger and menu pair needs to use the same attribute value. So, for example, if you added the context menu from above using “1” as the value for both attributes, a second custom context menu would use “2.”
Making it work
Now that you’ve got your custom context menu built and you’ve added the appropriate attributes, all you need to do is add the MemberScript #89 custom code to your page, before the closing body tag.
Otherwise, if you plan to add custom context menus sitewide, you can add the custom code to your entire site from your site’s settings in the Webflow dashboard.
Keep in mind that the code uses the CSS classes “visible” and “hidden,” so make sure there aren’t any conflicts with anything else on your site.
Conclusion
That’s everything, you can now go ahead and test your custom context menu on your live site.
If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.
![](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/65fb00dec37f40c3ff000ef9_9nUsSI2R2WdH_l0orSwOPoibWYFcLpp5BAvCvoI_fxUjymR3kA17yNdDKqUqOW-2HXctK71HO5vWuXpGIu1ZEN-ggx9G8OWk6hEz2QQ4ISYhreRoGyehpAaLRZkAODqrQyDsgN7DICS4nsePkVzDxRk.webp)
Our demo can help you add a custom context menu when visitors right click on your website.