O'Reilly logo

Responsive Web Design with jQuery by Gilberto Crespo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Most-used responsive navigation patterns

Planning mobile navigation is not an easy task because we need to provide unobtrusive and quick access to specific content in a responsive way and depending on the objective of the website. After a long study, Brad Frost, in his research of popular menu techniques, summarized some trends and established patterns for menu type concepts.

According to his article (http://bradfrostweb.com/blog/web/responsive-nav-patterns/), the navigation patterns are:

  • Top nav
  • Footer anchor
  • Toggle menu
  • Select menu
  • Footer-only
  • Multi toggle
  • Toggle and slide
  • Off-canvas

Let's inspect each one, see how they look, and understand which approach fits better with your project.

Top nav

The Top nav pattern is the most-viewed pattern on the Internet ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required