Using data binding and state, you can build a custom and reusable symbol with a dropdown to modify the content of a page. In this example we build a dropdown that allows a visitor to this site to choose a specific size and see a specific image that corresponds with that choice. Watch the video below for an exploration of how to accomplish this.
Here is an example Builder fiddle with the same content for you to play around with. If you are having difficulties with the fiddle or would like to create your own version, you can also create a new entry in your account, download the builder json file from the fiddle (right click on the preview and then click download content as json), and then go to your new content and right click on the preview, and select upload .builder.json file.
I hope you’re doing well. I have a question about the navigation bar I’m working on based on your video. I’ve successfully created the navigation bar in my code and am now tackling the task of building a dropdown for it in builder.io.
I’ve followed your teachings closely and copied your custom interactive dropdown code. However, I’m having difficulty figuring out how to link my navbar to it. I’ve noticed in your code that you’ve demonstrated where to click to open the navbar.
But now my dropdown does not want to open up. I’m wondering if adding the code state.showDropdown = !state.showDropdown would hard code the dropdown to appear when hovering over it. Could you provide some guidance on this?
Could you kindly share the Builder content link where you have implemented the dropdown? This information will allow us to review the specific implementation and provide more accurate assistance.
It seems that the issue is caused by the absence of content input “state.sizes”. To solve the problem, simply remove the “repeat for each” from the “Dropdown container” layer.
