Responsive Navigation Patterns-How much Navigation can be Accommodated

Monday August 19 , 2013

With every design one must consider levels of navigation and the links to include at each level. As you will discover that navigation bar which you create for widescreen browser doesn't work well with the smaller devices like smartphones.

How Many Levels and Links are Really Required?

When you choose a responsive pattern for navigating you will be able to notice that there are patterns that can hold as many links and levels as you desire. It depends on your site on how many levels and links of navigation it can have also there is no specific limit. Because different sites have different needs.

It is not necessary that more navigational links make it easier to navigate a site. There lies a navigation's contradiction which is "less links you have at one layer, the more layers you might probably end-up with." But your goal should be to decrease both the number of layers, which is quite difficult. So at each level, keep fewer level of navigation as well as links.

Responsive Navigation Patterns

Well, based on the space they use, it can be classified in 3 ways:
Top of the screen patterns - It is a restrictive pattern which can accommodate a single level of navigational items. Here the links sit at the summit and occupies a small amount of space. Thus, it only restyle navigation. Eg. Grid patterns and do nothing patterns can handle a single level of links with maximum 4 to 8 links.

Full screen patterns - The name itself says that it takes up the full screen with the links. It differs in accessing the navigation by making the use of the entire screen to present links. By nesting the list of links presented it can show the multiple levels of navigation. Eg. Flip, toggle, footer and select menu patterns can handle a couple of levels of links with about 12-15 links at every level.

Multiple screen patterns - It uses additional layers which are called from the off-canvas. With the new screen representing another navigation level, the trigger to make a call to the first layer of navigation might mark off. Eg. Off canvas and multi-toggle patterns which can handle levels of navigation with 12-15 links at every level.

Following are some of the more popular techniques for handling navigation in responsive designs

  • The Footer Anchor

  • The Toggle

  • The Select Menu

  • The Hide and Cry

  • Top Nav or 'Do Nothing' Approach

  • The Footer Only

  • The Left Nav Flyout

How to organize content and navigation?

  • You can combine content into less pages when doable.

  • Decrease content to what's quite necessary.

  • Organize content in concerned groups.

  • Organize content in different ways.

  • Wherever necessary, make use of cross systems of organization.

  • In a utility group, place outlier content.

  • Construct a sitemap.

About responsive navigation plugin

The Responsive navigation plugin is a very small JavaScript plugin that weighs only 1.7 KB minified and Gzip'ed which is helpful in creating a toggled navigation for small screens. For the best performance, it uses CSS3 and touch events transitions.


Well, it can be said that there is not an absolute way to create easy navigation. So instead of showing number of levels of navigation that too all at once, just decelerate on showing sub-levels. And it is overwhelming when in your global navigation you show every page across the site. Present more options only when people get deeper into the site hastily.

+44 (0)800 074 8051
Security Image
If you are looking for an average solution
Client Testimonials
I particularly wish to remark on the courtesy and helpfulness of the group who did the work, much appreciated...
- Ebti Sareen
Video Testimonials