5

Should dropdown menus open on hover?

over 3 years ago from , Digital Strategist & Partner at Studio Projectie

So, I was just looking at the new Dropbox site , thinking: "Why do I have to click on the arrows to open the drop down menus?" My second thought was, well hover doesn't work very well on mobile devices.... .

The dropdown on hover is like one of the first navigation patterns I learned back in the day but maybe it's time to help change the world and adapt the 'click/touch to open' method.

What does DN think? Stick with hover or go with the click?

19 comments

  • Tom WoodTom Wood, over 3 years ago

    Should designers code?

    9 points
  • Ken Em, over 3 years ago

    Menus. No apostrophe. Please. For the sake of my sanity.

    6 points
  • Jordan LittleJordan Little, over 3 years ago

    I think it's less a global convention and more of an app-scoped pattern.

    Facebook for example subscribes to click-to-open, but they have one area in their Events section that has an on-hover dropdown. It's pretty jarring.

    If your app has a lot of menus, then on-hover may save the user countless clicks. My dentist's software, I noticed, had large icons that, when hovered, displayed a giant menu. Seemed perfect for the situation.

    Personally, activating panels on-hover doesn't make as much intuitive sense as on-click. Typically items in a dropdown menu are contextual, supplementary, or tools – all of which require user intent to discover. An errant hover does not convey enough intent for me to think the user wants to see what's behind the little down-arrow. A click does.

    Consistency either way is probably the best bet.

    4 points
  • Andy LeverenzAndy Leverenz, over 3 years ago

    The real question is if you even need a dropdown menu at all?

    Dropdowns

    2 points
  • Pixel MonkeyPixel Monkey, over 3 years ago

    Clicking has two advantages: 1. you already mentioned that it is useful for mobile users with no mouse cursor; and 2. you could potentially design UI that just works without JavaScript and CSS.

    2 points
    • Peedu TuiskPeedu Tuisk, over 3 years ago

      You can open on hover without JS easily with a.dropdown-link:hover + div.dropdown { display: block; }

      2 points
  • James LaneJames Lane, over 3 years ago

    NO

    If it is a Dropdown as in a 'select' then it should always require an interaction such as a click/touch.

    If it is something like a navigation that would have a large selectable area (I'm thinking of megamenu) then yeah I'd say it's ok but would still need click/touch on a device.

    2 points
  • Jan ZhengJan Zheng, over 3 years ago

    As someone else said: stick with consistency—that's the most important part

    Other than that, components that hide more information (like dropdowns, but also include accordions, show-content-on-hover etc.) should indicate that there is content underneath those components with some type of affordance. On DN, they use the tiny arrow by your username to indicate there's more to see under your name. They hide a hover menu under the meatball menu (three dots) and assume (or know based on analytics) that users will know to try to interact with it, which I think could be clearer.

    I think affordance is the most important part, whether something is on hover or click to reveal, so people know to interact with it. And of course, if users are on mobile devices, all hover interactions need to become touch/tap interactions.

    2 points
  • Dakoda Reid, over 3 years ago

    Hovering as a means to access dropdown content is poor for accessibility. Like on touch devices, try navigating without being able to hover like using tab/arrows on a desktop/laptop or try using a voiceover tool like TalkBack. Actually very difficult.

    2 points
  • Nic TrentNic Trent, over 3 years ago

    Here on DN, the ”...” opens on hover. I find it more convenient to view a dropdown on hover.

    Clicking is an actual commitment from a user, but a hover is a bit easier and a good way to introduce more info. If the menu contains tons of info and obscures a lot of content, perhaps click to reveal is the best choice... “you're the designer”. Ha!

    Also, hover and touch can both work the same on mobile devices.

    2 points
  • , over 3 years ago

    Obviously consistency is important here but a lot of sites handle this differently. Will users click if they expect that a menu will open automatically on hover? I guess this is much like the question "do users scroll", which if you look at any research should be 99% of the users but when looking at Hotjar recordings and the likes you sometimes get a completely different results.

    I will try and introduce the click method with some new clients and see what the response is, maybe do some A/B testing. Surely the first feedback will be: "Why doesn't the menu open on hover?"

    1 point
    • Florian GrauFlorian Grau, over 3 years ago

      Been preaching "Users scroll" for years, before actually looking at a scroll map for our site. Guess what? Never believe the internet and do actual research with your own users.

      1 point
  • Caitlin G, over 3 years ago

    There should always be a click-based interaction. If you can only get to it by hovering with a mouse, then people who can't use a mouse won't be able to get to the items hidden within it at all. That includes people using a mobile device / touch interface, people who are blind and use a screen reader (keyboard controlled), and people who have motor disability and use a keyboard or something similar to navigate.

    1 point
  • Peedu TuiskPeedu Tuisk, over 3 years ago

    Their touch-screen menu is a hamburger anyway (even on iPad), these dropdowns are only shown on desktop devices, so hover doesn't seem to have a big enough drawback to force people do a click.

    1 point
  • Tristam GochTristam Goch, over 3 years ago
    • Click is simpler to implement well, hover is easy to do with just CSS but is often inaccessible or a bit fiddly to use (e.g. when you hover ever so slightly the wrong way and have to try eight times to get the item you're after)

    • Whichever direction you go in consistency is the main thing

    1 point
  • Christian BehrensChristian Behrens, over 3 years ago

    No, they shouldn't.

    Next!

    1 point