Learn

There is not one universal way to design the navigation of a website. Different websites, designs, and products will benefit most from different design practices.

Horizontal Navigation Bar

Horizontal navigation bars are the most common type of navigation. It usually lists the major pages of the site - making this content most easily accessible to the users. It is best used for sites that have a relatively simple and straightforward IA - where the content is clearly categorized into a number of separate pages.

Drop Down Menus

Drop down menus can often stem from horizontal navigation bars. Drop down menus are often used when the IA is very complex or the site is very content-heavy. In these cases, it may be easier to categorize the content into a large number of pages, then categorize the pages into groups. Those groups then will become the drop down menus.

Hamburger Menu

A hamburger menu, named for the signature layered lines, is an icon that when selected, opens up a drop down or side navigation menu. Because it is so commonly used, users are likely expecting it to open up a hidden menu, so it is a good way to save space without making it difficult or confusing to find the content.

Sidebar

The sidebar is a navigation pattern that is located on either the left or right side of the page. Sidebars can be used as the primary navigation or used to support a top navigation - displaying the options for a specific information-heavy subcategory.

Search Navigation

A search bar is commonly found at the top of a webpage. This allows users to navigate directly to a specific page or content item. While a search bar should not be the main navigation, it can be a very useful tool to any website - especially information heavy sites.

Instructions

Choose a website that you visit often. Answer the following questions to evaluate the navigation.

A) How many types of navigation do you notice? Where are they found? What are the differences between them?

B) What navigation menu or tool do you notice first?

C) Are there any navigation icons or labels that confuse you? Are there any that you expected that are missing?

D) Which navigation menu or tool is most clear and effective? Which navigation menu or tool is most confusing or ineffective?

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?