# How to switch from different events in Nav List?

**URL:** <https://forum.builder.io/t/how-to-switch-from-different-events-in-nav-list/4643>\
**Category:** Visual Editor Help\
**Tags:** visual-editor\
**Created:** [December 12, 2023, 11:21am UTC](https://forum.builder.io/t/how-to-switch-from-different-events-in-nav-list/4643 "2023-12-12T11:21:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**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 12, 2023, 11:21am UTC](https://forum.builder.io/t/how-to-switch-from-different-events-in-nav-list/4643/1 "2023-12-12T11:21:51Z")

</div>

I’m currently working on implementing a navigation bar with two distinct dropdowns. My challenge is figuring out how to seamlessly switch between these dropdowns.

Each dropdown should display different content, and I’m looking for a solution to toggle between them dynamically.

I’m doing this correctly as shown in the video below:

> **[Landing Page](https://builder.io/fiddle/03419c0c09194b29b63af4c3a6f3e940)**
>
> Experience Builder.io's Design-to-Responsive Code Transformation!

---

<div class="post-metadata">

**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 12, 2023, 11:50am UTC](https://forum.builder.io/t/how-to-switch-from-different-events-in-nav-list/4643/2 "2023-12-12T11:50:28Z")

</div>

Hello @xbrandonpowell,

Looks like you were able to get both the dropdowns working as expected. You seem to be doing it correctly, just keep adding new events to the Nav items

---

<div class="post-metadata">

**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 12, 2023, 8:10pm UTC](https://forum.builder.io/t/how-to-switch-from-different-events-in-nav-list/4643/3 "2023-12-12T20:10:35Z")

</div>

I’m encountering an issue where the entire dropdown is not hiding when I click on the links. I suspect that the click event is attached to the links, and not the dropdown layers. As a result, only one layer of the dropdown is being hidden. How can I ensure that the entire dropdown hides when clicking on the links?

---

<div class="post-metadata">

**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 14, 2023, 10:43am UTC](https://forum.builder.io/t/how-to-switch-from-different-events-in-nav-list/4643/4 "2023-12-14T10:43:43Z")

</div>

Hello @xbrandonpowell,

To hide the entire dropdown, consider using different states for each dropdown. For example, you can use `state.showDropdown` for the first dropdown and `state.showDropdown1` for the second.

For a visual reference and detailed instructions, please check out the Loom video provided below: