Drop Down Menu Best Practices

Should a drop down menu’s top level button be an active link?

  • Yes
  • No

0 voters

Currently my team and I are not in agreement with what the best practices are regarding top level navigation in drop down menus (Please excuse me if I’m not using appropriate terminology, I’m a visual designer).

The question is: Should a drop down menu’s top level of navigation also be a link?

Example: A button on the top level nav reads “Products”, on hover that button populates a drop down menu:

Product A
Product B
Product C

Some members of our team believe that the top level button which populates the drop down menu “Products”, should also be a linked button, which takes you to the first product page, in this case “Product A”.

Others believe that since the drop down menu populates on hover, that attention has been drawn away from the top level nav and that most users won’t consider it to also be a button and that if the button was clicked, that since it was labeled “Products” that it navigating to “Product A” would ultimately be confusing to end users.

We are looking for an answer and your input is greatly appreciated.

Thank you!

I would argue that the top level navigation button needs to be linked BUT have it go to a page that shows all your products or product groups if there are a larger number of items.

If your product page was to go automatically to your first product, and the user does not wait long enough to see the menu drop down they will think you only have one product.

Ex. Simple Menu
Products = (Product A, Product B, Product C, Product D)
Product A
Product B
Product C
Product D

Ex. Group Menu
Products = (Product Group A, Product Group B, Product Group C)
Product Group A = (A1, A2)
Product Group B= (B1, B2)
Product Group C= (C1, C2)

Example Site:

Second that last view. “Products” should definitely NOT take you to Product A.

If it takes you to a product overview page or a category landing page, that is fine. The sub links on the drop down are fine to jump straight to a section.

Remember these days when it comes to mobile device usability, if you have a top level link that requires a hover - you now have made it virtually unusable on a touch device.