Toolkit: Web Template

Template Navigation

The site navigation is the horizontal bar between the header and the content. Site navigation should be well organized using short link text for primary menu items. Dropdown link text can a bit longer, but care should still be taken to be clear and concise. Dropdowns can come in many options, but it's important to keep the navigation organized. It is permitted to change your navigational bar on sub-sections of the website, if that sub-section is large enough to warrant its own navigation. This can sometimes be helpful to keep navigation clean.

Consider conducting a small card sorting exercise internally or with a very small group of users to determine which words to use or to help organize your content.

Dropdowns

Dropdowns come in four options: single, 2 columns, 3 columns, and mega menu. Dropdowns by default will drop to the right. However, if a dropdown is one of the latter in your list of links, there is an option to drop to the left so that the content doesn't flow outside of the template. Single dropdowns should work the majority of the time. Only use the 2/3 column version if you have a lot of links. Only use column headings in the mega menu, not in the single, 2, or 3 columns variants.

Structure

The structure of how dropdowns are built is critically important to ensure they work correctly on mobile devices as well as on larger screens. Please work with the web team to ensure your dropdowns are coded correctly. Screenshots are provided below so you can see how yours should look.

Mega Menu Content

Please keep content in navigational menus to a minimum. We strongly advise against placing images or paragraph copy in a mega menu. Your top menu is for navigation, not extensive reading, and keeping it that way will generally provide a better experience for your users.