10 Javascript resources to create good navigation in any situation

by · June 25, 2015

Web designers should not take website navigation lightly. Good navigation system often makes the difference between regular readers and passer by.Â Your navigation should adapt to the particular needs of your content while remaining as simple as possible, to stay in your user comfort zone and not lose it.

To make incredible navigation system, I propose a series of 10 resources.

The main navigation of the site

The most frequent used menusÂ are obviously the main navigation, which will allow your users to access the different sections of your site.

People often put main navigationÂ on the left or top of the site. Remember that they must be able to be forgotten while remaining accessible at all times. The following resources might help in that case.

The simplest navigations are of course a simple list with one level, increasingly hidden by default and only reveal after a click, but it is also possible to do something hierarchical, with this tool.

Contextual navigation

When we think of contextual navigations, we often think of context menus, such as right clicks, for example. It must still be careful to specify that users right-click to access a menu. Moreover, this kind of operation is not the standard on websites, so it will weigh the decision to use the following resource.

Another presentation with the following resource, allow to create a menu retreating as a small “plus”, which unfoldsÂ on hover.

It is also possible to slightly deflect a resource like Midnight js, which displays a “fixed” area (either a menu, header, or otherwise) based on content that we currently see on the page. Often used for cosmetic purposes, it is also possible to use it to display a different navigation based on our location of the page.

This next resource is the perfect example of ideal breadcrumbs which isÂ incrediblyÂ functional and awesome at the same time.

Navigation for blog pages

Navigation on blog pages or, in general, all pages whose content is crucial, need to be as invisible as possible.

Finally, someÂ kind of page has particular needs of being able to follow our position relative to the content that can simply jump between the various parts of the content.