A clear and consistent navigation is essential because it provides the orientation for users.


The ever increasing number and variety of devices mean it’s getting harder to know whether someone is using a pointing device such as mouse, or a touchscreen, or both. With this in mind the navigation should be adapted to work well with a range of devices and screen sizes and use the relevant conventions accordingly, e.g. two-stage hover and click for pointing devices, but touch equals action for touchscreens.


Top Navigation

The top navigation works like a table of contents, or a store directory so that a user knows at all times whereabouts they are and where to look for more information. Visitors do not have to use the navigation, but it is important for them to know where it is if they want to.




Where there are multiple levels of content navigation should be extended using the left-hand navigation and flyouts.


Some situations where left-hand navigation is not required:

  • in an ordered workflow

  • content is not organised hierarchically. e.g. solely by topic as in a magazine or blog


On a site with multiple levels of content, breadcrumbs can really help. 




Support Navigation

The support navigation groups together functions that are relevant for the whole website. Functions can also be placed elsewhere on the page: search as part of the top navigation or the sitemap in the footer of the page.



Sample Items (in alphabetical order)

Bayer Global

Link to the Bayer Global portal

If there is not a prominent link to the Bayer global portal in the header


Link to contact form or e-mail addrees



Allow user to switch between content languages

If the website exists in more than one language


Link to login form or logout function if a user is logged in

Required if users can log in


Link to website search

If the website has a search form


Link to sitemap

If the website has a sitemap



Product Websites

Corporate Websites