DeveloperTutorials for Web Developers & DesignersNavigation

Website Navigation Overview

Effective website navigation is a vital element of every successful website. 

Benefits of Effective Navigation

The first benefit is obvious; your users will be able to navigate the website easier, and find the information they're after. This results in a higher conversion rate and less time handling unnecessary enquiries or support questions.

Another benefit which is often overlooked is better SEO. A well thought out sitemap combined with properly implemented navigation will help to improve your search position.

Types of Navigation

Primary navigation: The main method of navigating the website. The primary navigation is usually located in the header of the website, towards the top of the page.

Secondary navigation: Fall-back navigation aimed at providing some extra navigation items relevant to the users current position on the site. Normally used for sidebar navigation menus, or pages listed in the footer of the website. 

Breadcrumb navigation: Shows the current navigation item, in addition to the previous parent navigation items.

Sitemap: A map of the hierarchy of all pages on the website. This is automatically generated on all Oncord websites at

Dynamic navigation: Navigation items reflect the page structure, and is automatically updated when new pages are added or removed. This type of navigation allows a non-technical admin user to alter which items appear in navigation menus through the CMS.

Static navigation: Navigation which has been coded as links in the website design, meaning users who aren't acquainted with HTML will need to get in contact with a web developer in order to change their navigation items.

Examples of Navigation on Oncord Sites

We love seeing Oncord websites with great navigation. Below are some common techniques for implementing dynamic navigation on the Oncord platform. Coding navigation menus on Oncord is explained further in other knowledge base articles.

1. Horizontal primary navigation with secondary hover drop down menus -

  • Preview
  • Navigation Code
  • CSS Styling

2. Horizontal primary navigation with click to show secondary navigation -

  • Preview
  • Navigation code
  • CSS styling

3. Horizontal primary navigation combined with breadcrumb and a secondary navigation sidebar floated to the right of the content area -

  • Preview
  • Navigation code

4. Vertical primary navigation with click to show secondary -

  • Preview
  • Navigation code
  • CSS styling

What's Next?

After deciding which navigation type is the most appropriate for your situation, see other navigation knowledge base articles for more information about coding each type of navigation.