October 14
drop down navigation

Keys to successful drop-down navigation

This evening, I found myself clicking and clicking to try to make a drop-down navigation pane go away. I finally resorted to page-refresh (cmd+R). That’s when I saw my mistake. Or the mistake of the designers.

The first thing I did to try to make the drop-down disappear was to click in the main body of the page — outside of the navigation. That didn’t work.

Then I looked “up” and saw “login” — which did not make sense as a way to close the drop-down. But I clicked it anyway. And a popup (“modal”) appeared, prompting me to login with Facebook or Google.

Surprisingly, that action did nothing to make the original drop-down disappear.

drop down and modal


I x’ed out of the pop-over and hit refresh.

With fresh eyes, I saw the problem: the drop-down was aligned with “Log In” not with “About.”

drop down navigation



The design fix is straightforward: align the drop-down with the appropriate tab:

drop down fixed


Changing the marker would also help.

drop down fixed


Functionally, however, the drop-down should disappear on-click anywhere outside this area.


The mobile version of the site has the same alignment issue, which is somewhat understandable given the size of the output device.

drop down mobile site


Although, there is a shade change in the blue text to helps link the drop-down to its parent, this “active” or “in focus” indicator would be better:

drop down mobile fixed


Better yet, re-arrange the action buttons; log in and search are usually on the right:

mobile drop down fixed


When designing drop-down navigation features, remember the principle of proximity:

  • Align the drop-down with the parent navigation
  • Provide persistent “this is the focus” markers, not just one that works on mouseover, to invisibly tie the drop-down to its parent
  • Ensure that the drop-down disappears “on click” elsewhere








Posted 14 October 2017 by Kathy Gill in category "Navigation

Leave a Reply

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