10 jQuery Navigation Plugins

This post will roundup 10 jQuery Navigation Plugins that will make your navigation look awesome. Please leave a comment if I missed out some.

jQuery One Page Navigation Plugin

A lightweight jQuery plugin for the navigation on one-page sites. Uses the ScrollTo Plugin plugin to add smooth scrolling when clicking on the navigation. Also adds a class to the correct navigation items as you are scrolling through the different sections.



HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy and adds support for IE7.


Mobile navigation jquery plugin

It’s simple as abc. If you have some kind of navigation that you want to replace with a dropdown for mobile devices (read: screenwidth less than 480 pixels) then you’ve found what you’re looking for.



SliderNav is a plugin that lets you add dynamic, sliding content using a vertical navigation bar (index). It’s made mainly for alphabetical listings but can be used with anything, though longer words look a little awkward.


Flexible Nav

Flexible Nav is a small jQuery library which add a smart navigation bar on the right of the page. It improves a web page navigation and helps to visualize different sections of a document, an article,.. any web page.



Sausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document. The best way to understand how Sausage works is to view some examples.


jQuery MagicLine Navigation

The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities.


Drop Menu

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the live preview. Or you can create a login panel in your drop down like I did in the live preview.


Sticky Footer

This Sticky Footer can contain any kind of content and is ready to be used in your website. You can build your own menu and use from 1 to 12 columns to display your content.


Sliding Tabs

Sliding Tabs is a jQuery plugin for creating horizontal and/or vertical animated tabs for your website. You can have multiple instances of the tabs on a single page and customize them in any way with CSS . The plugin comes with many customization options, making it very flexible and easy to customize to your needs.


Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.