# How do I build a custom interactive dropdown? **URL:** \ **Category:** Technical Questions\ **Tags:** visual-editor, dynamic-template\ **Created:** [September 14, 2020, 5:46pm UTC](https://forum.builder.io/t/how-do-i-build-a-custom-interactive-dropdown/193 "2020-09-14T17:46:44Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![korey](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/korey/32/12_2.png) [@korey](https://forum.builder.io/u/korey)\ **Post date:** [September 14, 2020, 5:46pm UTC](https://forum.builder.io/t/how-do-i-build-a-custom-interactive-dropdown/193/1 "2020-09-14T17:46:44Z")
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](https://builder.io/fiddle/b91bc59378c84018b9e7f7a683ad21e4) 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. > **[Builder: Drag and drop page building for any site](https://builder.io/fiddle/b91bc59378c84018b9e7f7a683ad21e4)** > > Builder is the first and only headless CMS with full visual drag and drop editing ---
**Author:** ![xbrandonpowell](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/xbrandonpowell/32/3146_2.png) [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)\ **Post date:** [December 6, 2023, 8:30pm UTC](https://forum.builder.io/t/how-do-i-build-a-custom-interactive-dropdown/193/2 "2023-12-06T20:30:10Z")
Hi @korey, 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](http://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. [https://preview.builder.codes?model=figma-imports](https://preview.builder.codes?model=figma-imports) 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? Thanks, Brandon Powell ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [December 8, 2023, 3:55pm UTC](https://forum.builder.io/t/how-do-i-build-a-custom-interactive-dropdown/193/3 "2023-12-08T15:55:59Z")
Hello @xbrandonpowell, 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. ---
**Author:** ![xbrandonpowell](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/xbrandonpowell/32/3146_2.png) [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)\ **Post date:** [December 8, 2023, 4:57pm UTC](https://forum.builder.io/t/how-do-i-build-a-custom-interactive-dropdown/193/4 "2023-12-08T16:57:10Z")
> [@xbrandonpowell](#): > > [Builder](https://preview.builder.codes?model=figma-imports) [https://preview.builder.codes?model=figma-imports](https://preview.builder.codes/?model=figma-imports) ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [December 8, 2023, 5:01pm UTC](https://forum.builder.io/t/how-do-i-build-a-custom-interactive-dropdown/193/5 "2023-12-08T17:01:27Z")
Hello @xbrandonpowell, I’m looking for the builder content link ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/c/c1dca21328459a8dfbcfe40b6b91648da8ebd7b8.png) ---
**Author:** ![xbrandonpowell](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/xbrandonpowell/32/3146_2.png) [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)\ **Post date:** [December 8, 2023, 5:14pm UTC](https://forum.builder.io/t/how-do-i-build-a-custom-interactive-dropdown/193/6 "2023-12-08T17:14:50Z")
> **[Three Columns Dropdown](https://builder.io/fiddle/850fb2143c7d4bcdb9a772b4e2ea18c8)** > > Experience Builder.io's Design-to-Responsive Code Transformation! ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [December 8, 2023, 5:37pm UTC](https://forum.builder.io/t/how-do-i-build-a-custom-interactive-dropdown/193/7 "2023-12-08T17:37:19Z")
Hello @xbrandonpowell, 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.