Home > Prototyping and wireframing > How to design a drop down menu
Drop down menus are everywhere in web and mobile design. Since the advent of GUIs, the drop down menu has become a staple of UX design and in this post we'll show you how to create your own

Drop down menus are everywhere in web and mobile design. Since the advent of GUIs, the drop down menu has become a staple of UX design and in this post we’ll show you how to create your own

They come in various sizes, shapes and formats and are a useful way of presenting a list of information to users.  Frequently found in forms, the drop down menu is versatile. And, in Justinmind, you can make it yourself.

In this post, we’ll go over the pros and cons of drop down menus plus how exactly to create your own. Let’s get into it.

drop-down-menu-ux-design-ui-creating-a-drop-down-menu-navigation-menu

How to design a drop down menu in Justinmind 

Getting started with a Justinmind web prototype

Once you’ve download Justinmind, open it up and select a web prototype. You can set your own dimensions.

In our example, we’re designing a drop-down menu for a portfolio website – very useful to know for when it comes to creating your own as most websites will have a top navigation menu with drop downs.

To do the images and the text for the website, simply drag the image widget onto the canvas, resize it and double click it to add your own image.

There’s tons of websites available with good, royalty-free imagery, such as Unsplash, or alternatively have a peek at the post we wrote on free UX design resources.

You can use the text widget to place the text on your page where you desire.

You can integrate your interactive prototype with Google Fonts – which is great if you want to escape the confines of system default typefaces.


Create drop down menus in your prototypes. Download Justinmind.

Download Free


Creating your drop down menu in Justinmind

Now the fun stuff – the drop down menu. In our example, you’ll see a standard navigation menu where users can make their way around the portfolio site.

You could recreate this using simple text boxes… but there’s a more powerful way to go about it.

First, we’ll create the main menu, which we will attach drop down options to. In our example, we used a text table widget and made it 1 row long with 5 columns. Replace the default text in each cell with your main menu options. In our example, we have Home, Portfolio, Services, Clients and Contact.

Next, we’ll need to create the drop down options for each main menu option, using an additional text table widget for each drop down selection.

In our portfolio drop down there are 3 navigation options: Corporate Identity, Brochures and Flyers and Photography. Drag the additional widgets to the canvas. In the properties tab, adjust the number of rows and columns, as well as the menu text.

drop-down-menu-ux-design-creating-a-drop-down-menu-navigation-menu-portfolio

Making your drop down menu interactive

Even though the drop down menus are showing in your interactive prototype, once we add Events and simulate the prototype, you’ll see they’ll disappear. We’ve provided an example file for you to download and tinker with yourself, just in case.

To bring the menu to life, we’ll use Events. Click on the cell in your main menu option you wish to make interactive (so that the user can navigate its drop down options) and go to the Events palette. In the example, we click the text cell ‘Services’ and add events to that.

In the Events palette, use an ‘On Mouse Enter’ and ‘Show’ event, selecting so that when the cursor glides over the text cell, the drop down menu will appear.

Add another Events, this time ‘on Mouse Leave’ and ‘hide’ so that the menu disappears when your cursor isn’t above the text cell.

In the Events palette, there is a link to add a condition. Click this and in the logic section add a ‘NOT’ button. In the screens section, click the element you wish to add the condition to. In the drop down menu click ‘is visible’. What this does it hide the element when you’re not clicked on it. You can repeat these steps for the other text cells.

Now all you need to do now is simulate and you’ll have your drop down menu.


Creating drop down menus in Justinmind is easy. Download now.

Download Free


A little background on dropdown menus…

What is a drop down menu?

Much of our interaction, or user experience, with apps, websites and products involves a drop down menu. Here are just a few instances where you will find a drop down menu:

  •         Navigation menu
  •         Command menu
  •         Forms
  •         Attribute selection

The drop down menu has been with us for some time. It would be hard to imagine a world without them, such is their ubiquity. But are drop down menus all they’ve cracked up to be? Is it true that drop down menus can be a UX design nightmare? Let’s look.

drop-down-menu-ux-mega-menu-design-creating-a-drop-down-menu-navigation-menu

Benefits of using a drop down menu in your UX design 

One of the biggest benefits of using a drop down menu when you’re designing a website or mobile app is that most of us are familiar with them. It feels as though they’ve been with us since the dawn of time, but their longevity only adds to their utility.

This shouldn’t be overlooked; consistency and standards are a popular user interface heuristic. If you decide to use something in lieu of a drop down menu when a drop down menu is expected, then such a decision could seriously impair the overall UX design. And nobody wants impaired UX design. While you here, don’t miss out on navigation design – it’ll keep you up to speed with everything you need to know. 

A mega menu, another type of drop down but larger in size, shows users many possible navigation options. Within such a menu, a user can get a quick glance of the overall informational architecture of a website – especially if the menu is broken down into different categories.

drop-down-menu-ux-design-creating-a-drop-down-menu-navigation-menu

Drop down menus can also be visual. There is nothing to say that a drop down menu must solely be text. There are many websites, and more commonly ecommerce sites, which use visuals to entice a user as well as highlight differentiation of products and services.

Drawbacks of using drop down menus in your UX design 

Whichever UI element or UX design decision you make inevitably comes with critique. That’s not a bad thing, it’s UX design best practice to analyze decisions and test them.

Drop Down menus are no different. There is much debate to be had about their efficacy. But just what are some of the downsides to adopting a drop down menu in your design?

Ideally, you need to take a Goldilocks approach to dropdown menus. What do I mean by that? Well, when you stuff a drop down menu with more than 15 options, it can be too much information for the user to handle. Too few and you could be making the user click more than they really need to, possibly resulting in higher bounce rates. Getting it just right might involve changing tactics.

For example, imagine you’re asking someone for their gender. There are normally 3 options: male, female and other. To put this information in a drop down menu, instead of using radio buttons, obligates the user to click multiple times. Not world-ending, but still important to be aware of. Many small errors like this can culminate in an exhaustive and disagreeable user experience.

Poorly designed drop down menus are also a dime a dozen in web design. How many times have you gone to a website, clicked a drop down menu and struggled to keep it from disappearing?

A large drop down menu needs to be able to account for smaller screens, specifically mobile and tablet screens. Often a drop down menu will not fit on a small screen, disappearing because it’s too narrow a space to display all the options. But, this can be remedied with creating mobile and responsive designs from the get-go.

download_free

Steven is the web editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *

Download Free