8 Ways to Add a Responsive Navigation Menu on Your Site

Feb 17 2014 by Jacob Gube | 5 Comments

There are plenty of techniques for implementing responsive navigation menus on your site.

One of your options: Build your menu from scratch. There are many tutorials on the Web for that if you need to learn how.

But some of us may just be interested in getting the task done as quickly and as painlessly as possible. In this case, you could use open source code.

In this post, I’ll discuss a few excellent open source projects for building responsive navigation menus.

There are many options out there, so for convenience, I narrowed it down to just 8.

At the end of the post, you’ll find a summary table that has links to the official site, demos, usage guide, and official open source repository for each project I’ll talk about.

1. Responsive Nav

Responsive Nav

This responsive navigation menu system is lightweight — less than 1KB when optimized. Responsive Nav doesn’t have external dependencies, meaning you don’t need to include a JS library like jQuery for it to work.

2. Bootstrap Navs and Navbar

Bootstrap Navs and Navbar

Bootstrap has two components for building responsive menus. They’re called Navs and Navbar. If you just need a responsive menu, you should customize your Bootstrap build to include only Navs- and/or Navbar-related files.

3. menu-aim

menu-aim

This jQuery plugin will allow you to make responsive mega-dropdown menus modeled after Amazon.com’s fast and responsive menus. This is great for sites with lots of content. Read about the genesis of this plugin at this blog post.

4. Sidr

Sidr

Sidr is a jQuery plugin for creating those vertical slide-out drawer menus you often see in responsive websites and mobile apps like Facebook.

5. FlexNav

FlexNav

FlexNav was created with a Mobile First approach. It has good browser support: For example, IE7 is supported. FlexNav is dependent on jQuery.

6. TinyNav.js

TinyNav.js

If you simply want to responsively change your HTML unordered/ordered lists to HTML dropdown menus when viewed on mobile devices, check out the first version of Responsive Nav (discussed above) called TinyNav.js.

There’s also a jQuery-independent fork of TinyNav.js called SelectNav.js.

7. Pushy

Pushy

Pushy allows you to build a responsive, mobile-friendly slide-out drawer menu. It requires jQuery and Modernizr to support old browsers like IE7 to IE9.

8. SlickNav

SlickNav

SlickNav is a robust responsive menu navigation system that has a ton of options. It’s suitable on sites and apps with many links and subcategories. The development philosophy also emphasizes on Web accessibility: SlickNav is ARIA-compliant.

Summary Table

Site Demo Usage Guide Repository License
Responsive Nav Demo Responsive Nav usage guide GitHub MIT
Boostrap Navs Examples Boostrap Navs docs GitHub MIT
menu-aim Demo menu-aim usage guide GitHub MIT
Sidr Demo Sidr "Get Started" guide GitHub MIT
FlexNav Demo FlexNav usage guide GitHub Unlicense
TinyNav.js Demo TinyNav.js Usage guide GitHub MIT
Pushy Demo Pushy usage guide GitHub MIT
SlickNav Demo SlickNav usage guide GitHub MIT

More Responsive Navigation Menus

Related Content

About the Author

Jacob Gube is the founder and editor-in-chief of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

5 Comments

Thomas

February 20th, 2014

I recently used http://mmenu.frebsite.nl/ for a client after I tried and failed to utilize SlickNav and Responsive Nav for the multi-level navigation. Check it out if you didn’t know it!

Imtiaz Ali

February 21st, 2014

Navigation menu is very important in every website, especially when it is Responsive. Thanks for the tips Jacob :)

Tim

February 21st, 2014

Some of these are good. FlexNav doesn’t really work all that well. When you haver over the menus on a desktop, they tend to behave erratically and sometimes remain down.

Mike

February 21st, 2014

Pushy is awesome!

Humayun Hashmi

March 11th, 2014

Nice post Jacob, could you please explain a bit more about Flexnav, I am interested in it and want to implement it on my website. Does it require extra JS or just a standalone?

Leave a Comment

Subscribe to the comments on this article.