Skip to main content
Jason Burnett
Jason Burnett
Inspiring
September 15, 2021
Answered

Is this really how you create a drop down menu component?

  • September 15, 2021
  • 1 reply
  • 942 views

I want to create a simple combo box drop down menu with about 10  menu items.

I ad a rectangle shape and a caret icon in the corner then add a text field.

I then draw the same shape without the icon and just the text.

With the second rectangle and the text selected I create a component. called InactiveItem

I next create a hover state on the InactiveItem and change the color of the component artwork.

That covers the hover interaction for each menu item (except the selected menu item).

 

Next, I create a repeating field where this component is copied for each menu item.

I change the text on each menu item.

Next, I select the entire collection of things and create a component. called MenuOpen

 

Since I have 10 menu items, do I have to then create 20 states so that each menu item (when selected) appears at the top with the others hidden and then 10 additional states for when the menu is open?

 

Then I link all of the items (9) in the menu to their related closed state. And the closed states to the open states for each menu item? That is so many opportunities to mess up. That is so much duplicated work. 

 

That is absolute bonkers. 

 

There has to be a better way to do a dropdown menu. 

 

 

This topic has been closed for replies.
Correct answer Spas K.

Hi Jason. It would help if you post a screenshot with your setup (including layers panel), so we can see this better.

 

Xd is mostly good for making flows and planning some interactions. It falls short when you want to create really high fidelity prototypes that look like the real thing, especially with menus and dropdowns that have many options.

 

For these complex elements you have to prototype every possible case as a component state or separate artboard. In your case, if you want to show the selected item in the initial field, and show the dropdown menu with the selected item, you will indeed have a lot of states to cover for each option. I think you should be able to get away with around 10 states. Post some screenshots with a few different options, or a prototype with fewer items, so we can see if we can make it simpler.

 

When I have to use Xd, I usually only show 1 interaction so devs see the principle, and not every possible option (if it's not absolutely necessary).

 

Furthermore, component states never really worked as they should have and are still not fully functional - check this thread. You have already faced the issue where if you have multiple instances of a button or menu/dropdown items that have multiple states, you have to change the text for each state manually, on every instance.

1 reply

Spas K.
Community Expert
Spas K.Community ExpertCorrect answer
Community Expert
September 15, 2021

Hi Jason. It would help if you post a screenshot with your setup (including layers panel), so we can see this better.

 

Xd is mostly good for making flows and planning some interactions. It falls short when you want to create really high fidelity prototypes that look like the real thing, especially with menus and dropdowns that have many options.

 

For these complex elements you have to prototype every possible case as a component state or separate artboard. In your case, if you want to show the selected item in the initial field, and show the dropdown menu with the selected item, you will indeed have a lot of states to cover for each option. I think you should be able to get away with around 10 states. Post some screenshots with a few different options, or a prototype with fewer items, so we can see if we can make it simpler.

 

When I have to use Xd, I usually only show 1 interaction so devs see the principle, and not every possible option (if it's not absolutely necessary).

 

Furthermore, component states never really worked as they should have and are still not fully functional - check this thread. You have already faced the issue where if you have multiple instances of a button or menu/dropdown items that have multiple states, you have to change the text for each state manually, on every instance.

    Jason Burnett
    Jason BurnettAuthor
    Inspiring
    September 16, 2021

    I honestly cannot believe someone would use XD instead of just learning CSS and HTML to do prototyping of these basic things. Heck, a little JS and you can create super high fidelity prototypes pretty easily. XD, not so much..


    It seems like Adobe rushed XD to market to bite on Figma and Invision--Gawd forbid someone compete with them. How long before Adobe buys them up and shuts them down?

    Thanks for your response. This is how we used to develop websites back in the Mosaic days. Created a separate page with duplicate menus reflecting different selected states.

    Spas K.
    Community Expert
    Spas K.Community Expert
    Community Expert
    September 16, 2021

    Yeah, depends on how confident one is with their front-end skills. But I definitely agree it's more quick and dirty, rather than fully fledged, high-fidelity prototyping. Axure is probably the most feature-rich, but it lacks design features, and is html/css/js based anyways.

     

    I think Xd was made mostly for mobile apps, and websites were more of an afterthought. Some rather important cases such as the one you mentioned, scroll triggers, sticky items etc. still haven't been implemented.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices