Sketch Guide | How to make scalable symbols | 4) Dropdown Menu | Creation Guideline

Are you having this problem when you’re working with your dropdown menu symbol?

• You only want to show 4 items only, but the symbol is created with 6 items. In order to do it, detaching it from the symbol is the only solution.

Detaching from the symbol to have the desired number of options for the dropdown menu

• Or if you want to have hover or selected state in the design, you need to insert it manually or even end up detaching it from the symbol to change the style 🤦‍♀️

Detaching from symbol to change background colour state

If you’re having this problem, this article may help you to create a flexible and scalability dropdown.

Do you want your symbol will work like this?

• Hide/ Show options easily without detaching from the symbol

• Change states to hover/ selected/ disabled easily without detaching from a symbol

Let me show you how by utilizing Nested Symbol and Smart Layout 😉

First, let's take a look at all the elements needed to create a dropdown menu:

Dropdown Menu anatomy

A drop down menu is combined with a list of options, each option is formed by a label and bounding box and the background. What you should do is turn all the elements into the symbol inside a dropdown menu. Here we go 💫

How to make a Dropdown Menu symbol

1. Make a symbol for the Option’s Background

▸ Step 1: Create Style for the dropdown field and the background of the option inside the dropdown menu with different states accordingly

▸ Step 2: Create all the option backgrounds with different states that applied the style accordingly for default, hover, and selected.

▸ Step 3:
⚙️ Setting for the Option's background symbol:
- Adjust content on resize

2. Make a symbol for the Option

▸ Step 1: Make a symbol for the option with different states needed. This symbol will be combined with the label and option’s background symbol.

ℹ️ Note: The margin of the label will be equal to the spacing between each label divided by two.

Eg. If the spacing between labels is 10px, the margin for a label inside a bounding box will be 5px.

Setting for label

▸ Step 2:
⚙️ Setting for the label:
- Pin to left Fix sized vertically

Setting for the Option symbol

▸ Step 3:
⚙️ Setting for the symbol itself:
- Adjust content on resize
- Layout: horizontal from left to right

3. Make a symbol for the Dropdown Menu

▸ Step 1: Put the Option symbol together with no spacing in between and place them in the background.

ℹ️ Here the default number of options in the dropdown menu is 6. If your design needs fewer than 6 options, you can hide some of the options without detaching them from symbols. It's your call to make as many options as you want. Make sure your symbol will scale well with this number

Setting for the Dropdown menu symbol

▸ Step 2:
⚙️ Setting for Dropdown menu
- Adjust content on resize
- Layout: vertical from top to bottom
(Benefit: helps to show/hide option without breaking the symbol)

This is all about the tips for a scalability Dropdown Menu symbol. You’re all set 🏄‍♀️

Hope it helps!