Website Navigation Overview

Effective website navigation is an absolutely vital element of every successful website. Never lose sight of consistent, simple and effective navigation when designing a user interface.

Benefits of Effective Navigation

The first benefit on effective navigation is obvious; your users will be able to navigate around 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. The other benefit which is often overlooked is better SEO. A well thought out sitemap combined with properly implemented navigation will help to improve the position of the website on search engines.

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.
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 Synergy 8 websites at

Dynamic navigation: Navigation which is populated automatically by Synergy 8. This type of navigation allows an admin user to alter which items appear in navigation menus through the CMS.
Static navigation: Navigation which has been hard-coded, meaning users who aren't acquainted with HTML will need to get in contact with a designer to change their navigation items.

Examples of Navigation on Synergy 8 Sites

We love seeing Synergy 8 websites with great navigation. Below are some common techniques for implementing dynamic navigation on the Synergy 8 platform. Coding navigation menus on Synergy 8 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.