Why do some UIs use drop-down menus that can be closed with a second click, while others do not? It really annoys me when I have to click outside of the menu in order to close it and I accidentally activate another action. The escape key usually works, but it is so far away :(.

For example,

IntelliJ IDEA

Edit: Allow me to clarify. In the example above, clicking outside of the menu closes the menu, but can still activate other buttons (which is part of my question, is this a design flaw?).

Edit 2: I found out that I can right-click the button to collapse the menu. This works better than clicking a non-interactive UI element or pressing escape to collapse the menu.

  • Can you create a mock-up without 10 rep?
    – elemjay19
    May 6, 2013 at 19:34
  • I added a link to imgur. May 6, 2013 at 19:37
  • 1
    Do you mean that clicking on Main would close the drop-down once it has been opened?
    – elemjay19
    May 6, 2013 at 19:50
  • @norabora Yes in that example, clicking Main does NOT close the menu. It is very annoying. May 6, 2013 at 20:35

4 Answers 4


The answer is simple: the designer did not think everything through. And the programmer implemented the design without further thought as well.

Most users, while working with computers, think this way: if I do something to make things happen, doing this very same thing again should reverse things. Possibly because such behavior was introduced in computers' UI since the beginning of the web and has been re-introduced over and over again.

The short answer to your question is yes - clicking a clickable element again should revert it to its original state, where applicable.

Long answer — an active element in a UI is there for a user to change its state. Changes of state can be separated into two general groups: 1) the action alters the UI to an irreversible state (for example deleting an item from a screen) and 2) the action alters the UI to a reversible state. Your example is the second case, so users need a convenient way to revert the UI to the original state. This can be done in a few ways, including:

  1. Click on the element again (which is natural).
  2. Hit the ESC key (which is a convenient way in computer programs to undo an action).
  3. Hit anywhere else but on an element (which is a convenient way to close drop-down menus, popups etc.).
  4. Hitting a "Close" button.

If you create an element which will introduce reversible states, you should also introduce a convenient way for a user to revert the state back. In your case, it could be clicking on the element again.

It is up to the designer to think all these details through and describe the behavior of the UI. After the designer has decided how to revert the UI to its original state, that behavior should be implemented all across the application. Once a user does a series of reversible changes to the UI, he'll expect all other similar elements to behave in the same way. And if they don't, the level of friction and frustration will rise and could possibly lead to abandoning the product and switching to a different program.


As far as I know, all applications should employ this feature. The menu label when clicked first, opens the menu and when clicked once more, closes the menu. This is the default behavior to close the menu. You can have other behaviors like, closing on losing focus or closing when clicked out of bounds.

The clicking to close menu acts as a nice 'undo' mechanism similar to many toggle buttons.

Accordion menu is a good visual example of this feature. When you click the parent, the children are visible and when you click the parent again, the children are hidden.

I raised a related question regarding the behavior of menu items in websites and desktop applications if that provides you further information : Why do menu labels behave differently in desktop applications and websites?

  • +1 I prefer your answer to mine. Especially this 'undo' mechanism thing. May 6, 2013 at 20:53

This is poorly implemented example of navigation. A menu is NOT A WINDOW which should stay open unless closed. Menus are set of commands and while searching for one, I open few menus before finding what I am looking for. That means every time I open a menu, I expect it to close when I click outside or click on a different menu. So the example you are discussing is a bad implementation and should be corrected. When this rule is applied, clicking on the Menu Header itself will close the menu - BUT - If you would click on a different menu header, the first menu should close and the other one should show-up with the same click.

enter image description here

A working example of this approach is Adobe Photoshop and probably.

enter image description here


Usually a drop-down menu disappears when the user clicks anywhere BUT the drop-down menu.

That is what a user expects and it really annoys her when she clicks outside the menu in order to activate another action and it does not close the menu.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.