Design Template by Anonymous

Primary navigation

Overview

Primary navigation is the principle navigation system used to traverse the main pages of a website. The included links are generally for the most important pages on the site and are referred to as the primary navigation bar. The primary navigation bar should be located in an easily perceptible and observable location, usually along the top or side of a site. This ensures that it is front and center for each user that enters the site, leading them to the most useful resources first. It is also up to each specific website to determine what is put in the primary navigation bar, as there are many different types of companies, organizations, and individuals that create websites for all different reasons.

Marine Corps website which has a very spaced out primary navigation bar. — An image from the US Marine Corp website shows their primary navigation bar. It lists five different primary navigation links that detail information about the marine corps and its lifestyle. Notice how uncontested the primary navigation is, ensuring that it is not overlooked or lost in a multitude of other resources.

Positioning Primary Navigation

While not mandatory it is often a good idea to use fixed positioning in order to keep the header, which includes the primary navigation bar, in the viewing window. This means that no matter how far up or down the user scrolls they will still be viewing the website header, which includes the primary navigation bar, at the top of their viewing window. This allows the user to always have quick access to the most essential pages and prevents them from having to scroll all the way to the top of the site just to select a different page.

If fixed positioning cannot be used, there is a useful alternative known as sticky positioning. Sticky positioning is a relatively new type of positioning, at least compared to others such as fixed or relative. Sticky positioning works very similar to fixed, as it stays at the top of the viewport. The major difference is that the header would only stick to the top of the viewport once it is about to go off of the screen. This means that if you barely scroll down, the header would appear to partially move off of the page like a normal static element; however, as soon as a larger portion of the header is off the page it will fix its position to the top of the viewing port. Choosing between the two kinds of positioning depends on the specific situation and needs of the designer, but they are very similar and both can work in most cases.

Alternative Primary Appearances

Some sites, especially those with mobile devices in mind, have gotten rid of the conventional vertical or horizontal navigation bar and replaced it with what is known as a hamburger menu. The hamburger menu is three horizontal lines stacked on top of each other. When clicked, the icon expands to show navigation links/components that would otherwise not be seen.

Wikipedia page with a hamburger menu that is not activated. — An unopened hamburger menu. This image shows what the icon looks like before it is clicked on and expanded.

Hamburger menus are effective at saving space and preventing a website’s homepage from looking too cluttered or busy. This is particularly true for phones and other mobile devices that utilize small screens. As handheld devices continue to become more and more popular, as well as physically smaller and smaller, screen space is an ever present issue. This led to an increased use of hamburger menus in the last ten or fifteen years, mainly due to the fact that iphones and other small internet connected devices did not truly exist before the mid 2000s, meaning space was not as concerning as it is in the modern age. In addition, by placing the expanded hamburger navigation over parts of the page, it ensures that the user is instantly drawn to whatever content is displayed on the hamburger menu, rather than the navigation bar and the rest of the home page in the background.