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

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

NYTimes’ navigation example

QZ’s navigation example

Also, there are a collection of patterns in this

Examples of common responsive navigation

Block grid navigation

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:

Next Page β†’ Putting navigation at bottom

← Previous Page Using media query to define styles with condition

Last updated at 2017-04-19. Show version history


no comments yet.