Multi-Level Nested Dropdown Menus in Adobe XD
Вставка
- Опубліковано 11 лют 2025
- In this Adobe XD video, we're going to be designing and prototyping a multi-level dropdown menu using nested Component States.
Components in Adobe XD allows you to save commonly used elements, like buttons and icons, within your assets panel so you can quickly grab one when needed. They also resizability, overrides, and states to further streamline your workflows.
MORE FROM HOWARD PINSKY:
Twitter!
/ pinsky
Dribbble!
dribbble.com/pi...
Website!
www.letsxd.com
Facebook!
/ howardpinsky
Subscribe!
www.youtube.com...
I think XD would benefit from having a special dropdown menu component that automates all this. As it is it's just faster to mock this up using bootstrap.
To clarify: I’m used to do menus as stacks because it’s easy to change positions of menu items, so this way of creating sub menus doesn’t work because when the submenu appears it pushes down all other menu items
You’re the best, Pinsky ✌🏻❤️
I love this flexibility when building in this type of logic, makes a menu build so much easier. I'm still trying to figure out how to center align multiple menu items in a box(remove or add in item stays center-aligned) vs top align by default via logic. Padding works to a degree... If I could get it to center-align to the bigger area that would be very useful.
this was very fun and satisfying to watch
REally helpful and quite easy to understand... thanks
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
Thank you, It's helping with our products.
Great idea for giving presentations for clients and our team manager.
Thank you.
Chapeaux Monsieur! That was a really nice reverse engineering drop-down menu tutorial. I'm definitely going to try replicate that. 🙌
You're a wizard Howard!
Hi Howard! I really hope I can reach you. I am trying to create a menu that has multiple submenu options, and each of those have options tooo...whats the best way to go about it do you think? Thank you so much
Dude you are a life saver , thank you so much!!
Thank you Howard.
Thank you so much for the video, I really appreciate that.
dude, you re the best...i love your videos!
Really impressive. hover effect make prototype more real!
You're a lifesaver today! Thanks SM
Your videos are great to learn Adobe XD .
would be great to see submenu open in the middle of the menu list, not the bottom. Just curious what is the most effective way to build it that way.
Hi, My requirement is to have two submenu's eg: Active,submenu1 and Active,submenu 2. in this care, the components overlap each other and hover doesn't work as expected. Do you have suggestion for this issue?
Really helpful and easy tutorial! Much needed 👍
Hi Howard, can you make a video about how to increment by 1 with a plus sign and decrement by 1 with a minus sign?
Go on. Great video ever on the topic.
Hy Howard,
can we design multiple selection checkboxes in Dropdown. Like I am saying If I checked one checkbox that checked checkbox label should visible in Dropdown and after that again I clicked on dropdown to select the another checkbox that already checked checkbox should remain checked and its label should retain in dropdown.
Like this Option1, Option2, Option 3 and When I un-check any of option that will remove from the dropdown. Option1, Option3
some thing like that. can we do this thing in XD
Really useful video!
Thank you Howard.
+1 Sub
Very helpful, thanks a lot!
Thank you so much
Thank you sir
Great Jobs!!! You got my suppose as usual
YOU ARE THE MAN!!!
That was incredible!
I tried this. However when I hover over the nested drop down it doesn’t leave when I move the move off of it. Only when I move up. Confusing !
Beautiful!!!!
You nailed it !!
Howard is Very nice ticher!
Howard, GREAT JOB! I hope you see this and can reply soon... Is XD a possibility to use for fillable forms, kind of like a really classy Adobe DC on steroids? I'm working on a request that requires people to tick boxes, add their profile information, make selections, etc. The big catch is that it will not be on a website, but possibly browser-based. THANK YOU SIR!!!
You have just confirmed my promotion and pay rise ^_^
This is an honest question, but do you have any idea how far ahead Figma is compared to Adobe XD, it make Adobe XD look basic at best. You latest update to XD was for Outline Stroke, Inner Shadow, Angular Gradient for June 7, 2021. Is this really what you think the user want, Figma have just introduced Variable Components which is a real game changer, and a host of other really useful feature to help UX,UI designer do they're job.
thanks a lot
You just got a sub... good job..
Thanks so much :)
The problem I am finding doing Dropdown menus are the interaction with elements. Let me explain: If you want the buttons in the menu to have a mouse over state or something like that, they have to be a component themselves, but as soon as they are inside another component they become "non-master" components. This means that you should link them again in every new artboard you place the menu. It's a little frustrating. One workaoround for this is: Instead of doing one single master component for buttons, you have to create a master component for every button inside the menu, and link that master component to the page you want to link. Does anybody knows if there is another way for achieving this?
Thanks, this is great.
Love it 💖💖
Nice!
You're the best
Thank you for sharing :)
what if i try to export into HTML? does it work in the browser?
I would recommend to do a short simple videos for newbies. For example how to do just a hover effect. When I hover then element appears. Something like that. This tutorial is Too complicated for me.
11:07 its hard to understand!
You great sir.. just got a sub... good job..
Great;)
why is this talking so much about colors, design, and checkboxes, when the title is about multi-level nested dropdown menus?
for newbie like me , its so hard to undrstand bcs im on studying English language to , but i try more harder to undrstnd this expert leason, good luck to every1
I'm sure you will learn it quick. Best of luck brother !
I want to know the email address of this teacher
First