University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

Secondary Navigation

Overview

Secondary navigation is another common navigation type that can be found on almost every website. Do not let the name fool you, as secondary navigation is just as important, if not more so then the primary navigation. While primary navigation can be thought of as allowing the user to find the general /area that they are interested in, secondary navigation is used to find specific sections or products. There are many different types of secondary navigation such as dropdown menus, mega menus, filters, and many more.

Overall, while primary navigation acts as the central and main ideas of a website, secondary navigation fills in the gaps between these main ideas and allows users to find the actual specific locations that they are looking for. Because of this, it can safely be said that neither primary or secondary navigation can function alone, as they both rely so heavily on the other. Secondary navigation encompasses a large number of techniques and conventions that designers can utilize in order to further develop a site’s navigation.

Types of Secondary Navigation

Dropdown Menu

One prominent secondary navigation feature is the dropdown menu or bar. This menu is activated when you click a button, such as one from the primary navigation bar, which then reveals a multitude of new options that the user can look at and select. This drop down menu appears in front of the page, overlapping any elements or features that may occupy the same space as it. The dropdown menu is extremely important to website developers for a variety of reasons. One of the largest motives behind their use is how much space they can save. Instead of having the secondary navigation permanently displayed somewhere on the page, it can be toggled using a drop down menu. Because of this, the space that would have been used can be either left blank to create a less cluttered look, or used for other features such as ads or pictures. Additionally, dropdown menus can help users to navigate the site due to grouping similar categories of pages together. By having these related pages in the same location, users can find the ones that most relate to the product or information that they are looking for.

A basic dropdown menu that appears when users hover over the target button.
This simple dropdown menu illustrates the basic usability of dropdowns. When the button from the primary navigation bar is hovered over or clicked on, it expands and shows the contents of the dropdown menu. These navigational tools are widely used today for their appeasing visual appearance and ability to reduce clutter on webpages.

Mega Menu

Another useful secondary navigation feature is known as a mega menu. Mega menus are similar to dropdown menus in that they only appear when users click or hover over a certain button; however, as can be inferred from their name, these menus are much bigger than conventional dropdown menus. Mega menus, instead of just containing one column of similar category pages like a drop down menu, accommodate multiple rows and columns of links, pages, and other content. This makes mega menus most useful on extremely large and complex websites, as it allows the user to have access to each and every separate page, without having to search all around the site for them. In addition, because of the large amount of links contained in mega menus, they save large amounts of space that would otherwise be full of dozens of links. One important thing to keep in mind about mega menus is that they are much more confusing than dropdown menus, bringing up the point of how they should only be used when the target audience will have a good chance of understanding them. For example, it would be a poor decision to employ the use of a mega menu on a retirement home website, as older generations already have enough trouble navigating websites as it is.

Shows a mega menu which is dozens of links, all put together in a very tall and wide dropdown menu.
Mega menus are large scale types of secondary navigation. They are made up of many different rows and columns, allowing dozens of links to be neatly concentrated in one central location. This is advantageous compared to putting the links directly on the home page, as it greatly reduces the clutter.

Filters

A final form of secondary navigation comes in the form of filters. On most shopping sites, there are options to filter attributes so that only certain products come up depending on their prices, colors, or other qualities. Filters can be extremely useful for users to narrow down search results on a multitude of different sites. The types of filter also vary depending on each site, as a real estate website will need different filters such as house price, amount of bedrooms/bathrooms, and size. Meanwhile, the unh course search website instead has filters about class information such as their time, classroom location, and associated subject type. This illustrates how filters as a resource are present on many websites, but the actual filters themselves vary from site to site.

Filters that allow the user to choose what kind of clothing they would like.
Filters allow users to narrow down search results by selecting attributes that they deem important. This set of filters allows the user to specify the type of clothing, size, brand, color, and price range from what is in stock. This can save users large amounts of time as they do not have to manually search through the site. Instead they can have the website itself check for products that match their wants or needs.