When it comes to designing your website navigation menu, you’ll eventually need to make one critical choice in the form of deciding whether to make the top-level navigation menu items clickable or to trigger a hover-and-expand function to show sub-menu items.
While there are all sorts of rabbit holes in this topic such as how accessibility considerations may impact your decisions, there’s one quick and easy sure-fire rule of thumb to remember: never mix and match.
If one top level navigation item clicks through to a dedicated URL, they all need to click through to a dedicated URL.
Even if you have a mix of top-level only menu items and those with sub-menus that expand on hover, they should all work the same way.
How To Handle Top Level Pages
If you have any top-level menu items that function solely as a hover-and-expand trigger, consider making a new page that serves as a landing page for all the associated pages that appear as sub-navigation items.
In the following example, this is a client site currently in development and we made most of the top-level menu items function as a landing page with an image grid. Each image corresponds with an existing sub-menu item.
Here’s a variation on that idea.
This client wanted all top-level menu items to be hover-and-expand only. As such, we still made a landing page but simply inserted it as the first sub-menu item in the stack and assigned “Overview” as the menu label. When a visitor lands on one of those overview pages, it has the same page title as the parent hover-and-expand menu item to help tie things together for the site visitor.
