+1 (201) 870 - 6000
Web Master Icons
Episode 3 banner
Posted: Author: Angela Comments: 0

Website Navigation

Navigation is a huge part of our everyday lives. We must use our knowledge of navigation to get to certain places or else we would be stuck in one spot forever, right? Well, it’s not any different on a website. Website navigation plays a big role in having a successful website’s design. An organized and well-designed website navigation is what allows the visitor to interact with your website. It would not be a good thing if the visitor was stuck on a single page, would it?

Let’s start off with the basics: What kind of website navigation styles are there? There are a whole range of navigation styles for the web designer to choose from, but each type has its own reasons for being used. Here are some examples of the common navigation designs that designers use:

Top Horizontal Bar Navigation- These types of navigation bars are located at the top of the page, usually in text links, button-shaped links and tabbed-shaped links. Top Horizontal Bar navigation should only be used if you have a small number of links. An overload of links will cause the website to look cluttered and hinder the visitor from successfully navigating through your website.

However, if you want to add a few additional links, there is the option of adding a drop-down menu that reveals the additional links when the visitor hovers or clicks on the main category links.

Vertical Bar or Sidebar Navigation- These navigation bars are used primarily in a single column on the left side of the page. These help accommodate for pages that have a long list of page links. Similar to the Top Horizontal Bar Navigation, Vertical Bar or Sidebar Navigations can also add on a drop-down menu. Vertical Bar or Sidebar navigation designs can be used in any kind of website.

Tabs Navigation- Tab navigations are usually placed horizontally across the top of the web page; however they can also be placed vertically. Tabs are usually made to represent real-life tabs, such as those in notebooks and binders, to differentiate among each section of the page. Tabs can be made into any kind of design (eg. rounded, squared, textured, etc). They also provide a more organized look to the website, however, just like with horizontal bar navigation, it limits the number of links you can display. A solution to this would be to place a vertical menu on the side to accommodate for sub-category links.

Breadcrumb Navigation- Breadcrumb Navigation is a secondary navigation design. It helps the visitor locate where they is on the web page as well as how deep he is in the web page. They are usually displayed with text links and right-pointing arrows to show each level of depth within the page.

Drop-Down Menus- Drop-down menus are activated through mouse hovering or mouse clicking. It requires the use of JavaScript and/or CSS to show and hide the menu. They are usually used with top horizontal bar navigation designs and help display sub-category links for the main categories. Vertical bar or Sidebar navigation has a different menu design that is equivalent to the drop-down menu for top horizontal bar navigations. These are called “Fly-Out Menus”, which displays the additional links on the side of the main categories.

These menus are a problem in a responsive design though. There is no way for a visitor to hover over a touchscreen tablet to activate the menu, therefore these are not efficient if you want a primarily responsive web design layout. Check out our previous post on Responsive Web Design for more information on this.

Menu navigation, as stated above, is very important to a website’s design. Messy navigation systems will result in the visitor to leave the website in frustration. That’s why it is important to consider all the possibilities when deciding which navigation design is most suitable for your website.

What type of navigation menu design do you prefer?