[Prototype]-How to create a hover dropdown menu in XD?

[JaredS129]

Hi there,

I'm just wondering if there is a way to create "hover" micro interactions in XD?

For example, when I hover my mouse over a nav, i'd like a dropdown menu to appear.

<The Title was renamed by moderator>

[italosan]

Hi, I suggest you follow this tutorial: https://www.youtube.com/watch?v=ZII1R1GPwF0

[mitsukif]

It seems "menga menu" cannot be acheved with the current hover interaction feature...
Do you have any idea how it could work?

[HARSHIKA_VERMA]

Hi there,

I would suggest submitting a feedback request here: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests and share the link with us for tracking purpose.

Thanks,

Harshika

[Peter Villevoye]

You can create an example (one scenario of artboards/steps) which shows how such a hover menu would appear, but you'd need multiple steps to mimick the operation of the whole menu, if you really need or want to do so. The current approach in XD for prototyping interactions in combination with hovers is flawed. Read this thread to learn more about it:

https://community.adobe.com/t5/adobe-xd/prototype-menu-dropdown-with-hover-effect/m-p/10999103

[labordeka]

Hello,

I am new to Adobe Xd and looking for a simple drop down menu. I found a few videos but nothing I like and simple to use. I did find one with using States but it doesn't show the 5 hoover drop down vertical menu that is what I am searching for. Can anyone give me some information on this subject.

Thank you,

Kathy

kathylaborde7@gmail.com

[Kenneth Kawamoto]

Can you explain what is "5 hoover drop down vertical menu" you are after? A drop down menu with 5 levels?

[labordeka]

Hello,

I mean I have 5 navagation links I want to hoover over with a drop down list. The videos I have been reviewing have a flyout menu or you just click on the arrow and all the links appear. I don't want to use several artboads. This new Adode Xd version I believe you can have one artboard and use states. Any help or template would be appreciated.

Thank you,

drop down url

Thank you,

Kathy

<Personal Info Removed By Moderator>

[Kenneth Kawamoto]

Something like this?

https://xd.adobe.com/view/89ae2cea-cd84-425c-b703-7eb833bbf993-dcfd/?fullscreen

(v02)

[Eden28]

Hello @kennethkawamoto2

Could you send me your file with the hover effect because i have problem et what you did is exactly what i want to do. Thank you in advance.

[Kenneth Kawamoto]

DM me

[Jad wehbe]

Hello @kennethkawamoto2

Could you send me your file with the hover effect too because I also have a problem and what you did is exactly what I want to do  Thank you in advance. 

[kathyl84447461]

Hi Kenneth,
Using Dropdown in states takes sometime but it does work not the way I like it. I create a few artboards and wireframe the menu items to connect to the next menu.

https://xd.adobe.com/view/b061faf6-6106-4a66-ab22-924234377801-e532/

Here is the wireframes that you will need to click on.

Click Menu 1
Click Item 1a
Click Menu2
Click Item 2a
Click Menu 3
Click Item 3a
Click Menu 4
Click Item 4a
Click Menu 5
Click Item 5a
Click Menu 5 Note*This will bring you to the beginning of your drop down.

Here is how you can link a Menu item to a webpage. XD doesn’t have insert links

Click Menu 1
Click Item 1a
Click Item 1aa
Click Menu 1 Note* This will bring you to the beginning of your drop down.

I hope this help.

Kathy Laborde

kathryn.laborde@saic.com

[Spas K.]

@kennethkawamoto2 you gave me a bit of hope, I thought "hey, maybe they actually fixed it", then I realized the dropdowns also activate if you hover over the area below the buttons.

I also assume it only works if the dropdowns are the exact width of the button and don't extend below the other ones, which eliminates 90% of the use cases 😕

Will keep on waiting for the feature that allows one component to trigger another's state...

[Martina Miljak]

Hi Kenneth,

Can you share how you made that?

Thank you!

[Rishabh_Tiwari]

Hi Martina, 

Thanks for reaching out. Please refer to this tutorial https://www.youtube.com/watch?v=ZII1R1GPwF0 and let us know if this helps or if you need any further assistance.

Regards

Rishabh