Adobe XD Dropdown Menu

[@mikemyren7308]

I’ve been trying to figure out a work around for a hover drop down for a few days. Glad to see i’m not crazy and XD doesn’t have that functionality yet.

[@JesseShowalter]

You are not alone, my friend!

[@RadaProductionsRada]

You's a baaaaadddddd man Jesse Showalter. Watching your videos is like going to grad school for free

[@JesseShowalter]

Dude! Thanks so much, I’m so stoked and humbled to be able to do what I love! Have a good one, man!

[@rogersam1294]

When the video speeds up I get lost. Too bad that's the part I need to figure out. Even when I slow it down I can't figure out the key strokes

[@jbvatuone]

Yay! I am officially a member! This get's me so motivated. You'll help me ACE Georgia Tech UX/UI Bootcamp! :-)

[@ofusername]

I think in 2021 it's working, I've been creating a dropdown component: the dropdown is itself a component, each dropdown items are also separate components that have hover states itselfs, than group thouse into an component > dropdown and integrated in the main Nav-Item state Hover, I don't know I explained right, I will try to add a short movie or something :)

[@kodo_tube]

Thank you Jesse for the wonderful way you have to communicate complex stuff in an easy way. I am an old dog that's trying to learn new tricks and you re the one helping me out man. Cheers

[@JesseShowalter]

Happy to help!

[@pranav_chandran]

Thank you for the tips Jesse. Expecting more tricky tips in the future.

[@JesseShowalter]

You’re very welcome! So much more to come!

[@pranav_chandran]

@@JesseShowalter waiting....🤩

[@Mariiadesigner]

I try to cut - paste or just drag the rectangle into the component. When I drag it, it shows the STOP sign. How can I add the rectangle to the existing component?

[@frankvasquez4827]

Hmm, I think it can be done within the same art board. Just make the main component with 3 states, normal, hover, and active. In prototype mode just add another interaction after the hover with destination of the active state.

[@JesseShowalter]

I’ll give this a try!

[@CELLX23]

More of these please!! loving it

[@JesseShowalter]

more coming soon

[@AlexAlex-xz3bb]

Thanks Jesse, your tutorial was awesome, just figured it out how to solve a big issue. Thank you so much! :)

[@JesseShowalter]

Yes!!! Thanks, Alex!

[@yg7764]

Love your videos, Jesse... Just a feedback... There is no need for two artboards .. when I found component states the first thing I tried was a dropdown. You can achieve the same by creating three states for a component.. one normal, one hover and one-clicked...

[@JesseShowalter]

Thanks so much for the support and the feedback! 🤙🤙

[@vasucreations2678]

Please help me in resolving the following issue: If we have another dropdown inside the subnavigation, for example the Get a Quote has another subnavigation then how to prototype it?

[@binitechs]

Cool video u rock it😁

[@AnthonyHoudek]

is this possible after the artboards have been created? could I create all the animations on one page, create a component and have it do the same thing over all my boards?

[@UnfinishedStudio]

2 questions: 1. Have you worked with Sketch? 2. What are some things that made you prefer XD over Sketch?

[@markinmotion8044]

XD, Sketch and Figma all have their design uses (I use Figma as it has collaboration for teams) but for Prototyping id recommend a 3rd party such as Principle or ProtoPie.

[@richardottley4611]

You are the best 💯👏

[@JesseShowalter]

Thanks Richard 👍🏼

[@mohamedabolfotouh8740]

I hope you didn't speed the video because I didn't get what you did exactly Thank you anyway you have a lot of great videos and I keep watching it to learn more about XD

[@JesseShowalter]

Haha, I didn’t speed it up, I just talk really fast! Sorry, but thanks for watching!

[@richardottley4611]

Thanks for the video Jesse 🤗👏💯 I'm currently working on adding a drop down menu to a side design project 😁

[@JesseShowalter]

It’s only getting better 👍🏼👍🏼👍🏼

[@Scientificmethods]

When I try to move the Ellipse into the Nav area it just gives me a no entry symbol... - Don't worry sussed it, you have to paste directly onto it can't drag and drop so glitchy

[@soeltom]

So if I make a dashboard menu with many dropdown box, do i need to make each dropdown at new artboard to make the prototype work?

[@JesseShowalter]

there is a better way to do this now, I will make a new video soon

[@soeltom]

@@JesseShowalter thanks, I'm new with xd so I really need that lesson 🙏

[@jillianbanks-kong2949]

@@JesseShowalter yes please!

[@TechieChuks]

Please can you do a tutorial on how to create a blinking cursor effect on a textbox field in adobe xd?

[@JesseShowalter]

Thanks for the suggestion, I’ll see what I can do!

[@thegiftedstar3142]

Hey Jessie, may you please please help me, i want to know how to add an image into adovbe xd everytime i google how to they wierdly already have it in there, and i want to know from scartch, i juat got introduced to the software a week agao,,,,please please please please help me, asap?

[@dynamichorse9779]

Very good tutorial fast but understandable, but i have a concern which is about artboard size sir. Isnt it we have to design under iphone 6/7/8 for ios apps and 360x640 for android apps? So when i follow these size guidelines and test them when i finished designing on my phone LG G6 or iPhone 10, the designs dont fit on those phones, the artboards are leaving space on the top and bottom despite my contents in height are have infinite size. But if i set the exact size for iphone 10 or the LG then it fits. So what is the proper artboard size to fit on all iphones and android phones? Thank you.

[@coreymillard7201]

it is now possible to do this straight as a hover state :)

[@RAJESHKT]

its very speedy. Difficult to catch up.

[@JesseShowalter]

I’m so sorry Rajesh, I get excited and talking really fast about things I’m passionate about!

[@richardottley4611]

Quick question would creating an overlay work in this scenario with a drop down menu?

[@GabrielBraun]

Yes I would think creating and overlay would be better. Because you would have to duplicate each board just to reveal drop down menu.

[@anamorphiiiic]

I also thought about that in theory, however you can't isolate a particular element in your components to hover over and trigger another drop down

[@LesaniDe]

Thanks you so much for this video! I've been trying to figure out how to do this with my university project group for a whole day and you just safed our project from being rage quittet.

[@JesseShowalter]

So stoked for you, Lesani!! Get get em, lady!

[@einzelstein5291]

I think it's a bit a pain in the ass for adding submenues to an existing build nav, right? :/ Thank you btw for your wonderful work. Everytime a pleasure!!!

[@JesseShowalter]

Thanks so much for your support, Einzel!

[@einzelstein5291]

@@JesseShowalter Oh wait, I mean Mahalo ;)

[@JesseShowalter]

🤙🤙🤙

[@mae2309]

it would be nice if we can do a bridge from XD to EditorX or Webflow... who ever does that first. whether is Webflow or EditorX they would take the whole cake...

[@erikprestonTV]

God damn, i don't even care about it being animated. I just want a dropdown menu to appear over one item for a prototype. Is there anyway to do that??? I just want a menu to appear as a hover state. Seems so simple but every video wants me to do some whooshy spinny effect.

[@sergio_grez]

i think it can be done easily in the same artboard. Just create the dropdown menu and paste it in the "hover" state of the link and position it where you want it to appear in the hover state.

[@niharbhusari2706]

I love his content. Has helped me a lot in improving my skills. But I have to start every video with a low volume. #notcomplaining

[@JesseShowalter]

Haha, thanks so much for the support, man. I super appreciate it.

[@JBamadeusstyle]

Like this tutorial but way too fast and blazing through the dropdown section.

[@karenhere9534]

can't do it on windows

[@erwinluijendijk3922]

Why don’t you use component states? This is a bit painfull to see. Now you are using two artboards 🤷🏼‍♂️

[@erwinluijendijk3922]

And then you can use hover for a dropdown.

[@erikprestonTV]

Please make a video how to do that. Because I have been on company time for hours trying to figure out how to do something that should be so simple.

[@jillianbanks-kong2949]

This is what I am looking for also. Please make! :-)

[@ibrahimgamal9308]

Thanks

[@mcotechtv4180]

lol

[@JesseShowalter]

🤘

[@svfedot]

зачем ты кричишь? Напугал

[@JesseShowalter]

I’m so sorry- I shout when I’m excited!