Home App Docs Github

New videos, please!

First, I’ll admit I only know enough to make a mess. I’m going crazy trying to get a dropdown menu that I’m happy with.

Could you make a two videos on how to make a nice dropdown menu that are click activated (not hover over)??

  1. Using your own dropdown menu template. (I can’t get it be click activated)
  2. Using one pulled off the web somewhere.

Some that caught my eye:

https://react.rocks/example/rc-menu

https://react-bootstrap.github.io/components/dropdowns/

Do you have a favorite place to look for such things?

Hi @clickityclick,

Thanks so much for taking the time to send us your feedback! We’re always looking to improve our user’s experiences with the platform. We are working on adding and improving our videos for our guides and docs.

For now, you can use our dropdown menu template and change the element actions in the data tab to create an on-click dropdown menu. To do so:

  • Navigate to the layers tab and select the “dropdown container” layer. This is the layer that contains the element action (any element with a mouse icon contains an element action).

  • Once selected, navigate to the data tab and locate the “Element actions” section. There are two actions on this element, “mouse over” and “mouse leave”. To make this dropdown menu an “on click” instead of an “on hover” dropdown, select the “mouse over” action and change it to “click”.

dropdown

Here is an example of an on-click dropdown menu: https://builder.io/fiddle/276eaedd2b03474b89a8cbd8dfa65c91

Another option would be using Builder’s “custom code” block and pasting code from the web. The custom code block works well for some things, but not perfectly for others. If you find code for a dropdown that you would like to use, it would be worth a try.

If you have any questions, don’t hesitate to reach back out :grin:

Thanks. I did as you said and it works with a click to open, then to hoveroff to close. This is semi-mobile-friendly.

Your link didn’t work for me, but I’m guessing its the same video Steve has on youtube… its good.

I haven’t tried any custom stuff yet.

Of course! If you would like the dropdown menu to open on click and close on click:

  • Navigate back to the click action in the data tab and edit the action.
  • Replace the current code with: state.dropdownMenuActive = !state.dropdownMenuActive

Now, the dropdown menu will close when clicked on instead of hover off. Here is an example of an on-click dropdown menu.

If you have any questions, let us know! :+1:t2:

1 Like

This works well. Sometimes requires a page refresh.

Maybe similar to this, is there a way to have a single click button hide/show a section or box?

Is there a place somewhere with all the state. commands listed?

Similarly to the dropdown menu, you can create an animation that will allow you to click on a box/section to hide or show the element. Here’s a guide that will walk you through how to add custom code: https://www.builder.io/c/docs/guides/state-and-actions

State is just something that you can use to create dynamic templates, and some of our templates use it too. You can use the guide above to learn more about how state works and how to use it.

If you have any questions, let us know! :+1:t2: