Part 3—Responsive with Media Query

17 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

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


Navigation strategy for small screen Copyright © by makzan. All Rights Reserved.

Share This Book

Notice: 2nd edition update is work-in-progress. See update logs for details.