ropdown menus are a common UI element seen in almost every digital application. Though their form changes between platforms or product, the core structure is often the same. Thanks to components and component states in Adobe XD, creating a reusable drop-down element is easy to do. Now, with support for Stacks, adding, removing and rearranging items in a drop-down component is easy too.
This tutorial will walk through the steps of integrating Stacks into drop-down components to make them more adaptable and dynamic for use across your designs. Download the starter file to follow along on the tutorial.
Drop-down menus typically have two core states; open and closed. This tutorial will be making use of component states to recreate this behaviour. Depending on your use case you may be incorporating hover, focused or other states into your element, but for the purposes of this tutorial, the base cases will be covered.
The starter file includes basic drop-down elements to start with: a header and the drop-down content list. These elements can be used to construct the drop-down menu and contain padding so that as text resizes, the content itself resizes. However, if a fixed-width menu is desired, padding should be disabled for these groups in the property inspector.
Create the drop-down component
The first step is to create a component out of the ‘drop-down starter’ element or the ‘header’. This can be done by selecting the element and either right clicking and selecting “Make Component” or by clicking the plus button in the top right corner next to “Component”.
This will create a component with a Default State, which in this case is the ‘closed’ state of the drop-down menu. Since this is the Main Component, changes made here will be passed on to instances or copies of the component elsewhere in the design, which is why it is important to make sure the Main Component is where states and other universal properties are applied.
Adding the open state
With the newly created component selected, click the “+” button next to Default State in the component panel in the property inspector. Select “New State” from the menu to create the new state. Type in a name for this new state (Open is a good option) and press enter.
At this point, there are no visual differences between the Default and Open states, which can be toggled between by clicking them in the component panel.
With the Open state selected, the menu content can be added in. It is usually a good idea to click into the layers (first group or layer) within the component when adding elements to ensure that the new content is being added within the component and not outside.
Since the drop-down content is already built, the group can be copied and then pasted into this new component state and positioned accordingly.
If the element pastes into the header, try selecting the group layer above before pasting. Since padding is enabled on the header element, adding content to that object will cause the background to resize, so it is helpful to ensure the paste is not happening within that object.
With the menu now positioned, toggle between the states to see the result. At this point in time no prototyping links have been created so there is no interaction built in in preview mode.
With both states now configured, this component can be wired together in prototyping mode to become a fully reusable component. Switch to prototype mode using the tabs in the top left of the interface.
Switching the component back to the ‘Default State’ links can be added. Select the click target to trigger the open, in this case the entire drop-down group will be the trigger. Click the blue arrow to add an interaction.
In the property inspector, set the destination to the open state and define the transition and animation as desired - the default Auto Animate settings are a great option.
Now switch to the open state to add the close interaction. In this case select the header once again so that clicking only the header, not the full drop-down, will close the drop-down. The settings will persist so nothing should require modification in the property inspector.
Now the drop-down component is wired together. Click the play button and test drive the interaction.
Stacking up content
With this fully reusable component now created and linked together it can now be used for different drop-down menus across the design. The last step is using Stacks to make changing the content even easier.
Since different drop-down menus have varying numbers of items, Stacks in Adobe XD will allow easy addition, removal and rearrangement of these items in the menu.
Select the ‘Open state’ from the component panel in the top right. Using the layer list on the left, locate the ‘Content Stack’ group and select it. This is the group of content containing the list items in the menu.
In the property inspector on the right, toggle the “Stack” option on to enable a Stack on this group. By default XD will set this to a vertical stack based on the layout of content in the group. That's all that needs to be done!
With a simple click this content can now be clicked and dragged to reorder and as elements are added or removed from an instance the drop-down list will adjust it’s sizing thanks to Stacks.
Advanced mode - make the drop-down content scrollable
Having content in a rearrangeable stack is a power move, but it can be taken up a notch with Scroll Groups in Adobe XD. Using Scroll groups these drop-down lists can be made scrollable with just a click. For instance, if a drop-down menu has a fixed height, but a long list of content, being able to scroll through the options is essential.
With the same Content Stack group selected, click the “Vertical Scroll” option underneath the dimension controls in the property inspector.
Two blue handles will appear on the drop-down list. Positioning these handles will set the viewport height for the drop-down menu. With Padding enabled, the drop-down will resize as these scroll handles are adjusted.
Previewing the design, the drop-down list options will now scroll while maintaining a fixed height on the drop-down. This change can be made on a single instance, but remember, if the behaviour should be applied to all drop-down menus, ensure the scroll group is added to the Main component states.
Whether you’re creating a drop-down, an accordion list or FAQs the same principles can be applied and made into powerful components for use across your design. Learn more about Stacks and Scroll Groups.