A repository of over 1000 quality jQuery plugins

jQuery jQuery Infinite Tabs

jQuery Infinite Tabs is a jQuery Rounded Edges plugin.

Created by Mattheworiordan

Infinite Rounded Tabs JQuery Plugin

Not what you're looking for? Click here to view more Rounded Edges jQuery plugins

Infinite Rounded Tabs JQuery Plugin

There are quite a few Tab plugins for JQuery, including JQuery UI's own tab widget, however none of them support the concept of infinite scrolling tabs. Google Docs has a great implementation of infinite scrolling tabs to manage worksheets, so this plugin is inspired by the Google Docs Spreadsheet tab system, along with the rounded tabs solution by Chris Coyier.


  • Allows you to lock / pin tabs to the left hand side
  • Once there are too many tabs to fit in the container, then a left and right arrow will appear allowing a user to scroll through the tabs
  • All tabs are nicely rounded at the top and at the bottom
  • Full support for Firefox, Chrome, Safari, and Internet Explorer 9+
  • Visually degraded but fully functional support for Internet Explorer 7-8
  • All style sheets are constructed with SASS/SCSS so you can either change the variables in the SCSS and regenerate your own CSS files, or you can simply override or modify the CSS files directly.
  • All CSS & JQuery files are minified and Gzipped down to just over 2k.



Screen shot



Include jquery.infinite.tabs.min.js file after JQuery has been included. If you want IE7-8 support, please conditionally include selectivizr-min.js which resides in the vendor/js folder. Please refer to example.html for usage.

Include CSS link to css/infinite.tabs.min.css in your HTML within the head. Please refer to example.html for usage. If you want IE7-8 support, please conditionally include CSS link to css/infinite.tabs.lteqi8.min.css.

All tab lists must be ul (unordered lists) with the class "infinite-tabs". Example to follow:

// set up the tab system
  .find('li').click(function(e) {
    // code goes here to react to tab change

<ul class="infinite-tabs">
  <li class="active locked"><a href="#pinned">Pinned</a></li>
  <li class="locked"><a href="#pinned-two">Also pinned</a></li>
  <li><a href="#one">1</a></li>
  <li><a href="#two">2</a></li>
  <li><a href="#three">3</a></li>

Repository and forking

I welcome feedback and commits to this library. Please fork me on Github at https://github.com/mattheworiordan/jquery.infinite.tabs.js


This script was written by Matthew O'Riordan


jquery.infinite.tabs.js is Copyright © 2011 Matthew O'Riordan, inc. It is free software, and may be redistributed under the terms specified in the LICENSE file.

You might also like these other Rounded Edges jQuery Plugins


Copyright (c) 2011 Matthew O'Riordan, inc.