Navigation strategy for small screen

In small screen, we used to hide navigation to provide enough screen space for the main content.

There are several approaches:

  • Dropdown select
  • Hamburger menu
  • Slide down
  • Footer navigation

Navigation trend from Treehouse
Navigation trend from Treehouse

You may find this essay about popular trends on navigation pattern from Jake Rocheleau.

Also, there are a collection of patterns in this ResponsiveNavigation.com.

Examples of common responsive navigation
Examples of common responsive navigation

Navigation in block grid
Navigation in block grid

Navigation based on select
Navigation based on select

Extra: Brad Frost has written two articles on the patterns with pros and cons on each navigation pattern:

What’s next? We’re going to take a look at “Putting navigation at bottom”.

overlaied image when clicked on thumbnail

Makzan | Mobile web design | Table of Content