James Linden

~# linux devops jedi / maker / N6NRD

Code / Sidebar Tab Control jQuery Plugin

Sidebar Tab Control jQuery Plugin


The Sidebar Tab Control jQuery Plugin is a plugin to render a navigation tab control as a sidebar.

See the demo

Current version is 0.3.3

Screenshots of rendered plugin


  • jQuery 1.7.1 +
  • Chrome, Firefox 4 +, IE 8 +


  • This plugin is not multi-instance safe -- you can only use it once in a page.


  • Positioning is controlled by a user-defined container DOM element.
  • Content is loaded via ajax, not embedded in hidden DOM elements.
  • Control may be assigned a user-defined ID value for external manipulation.


Using the plugin is simple:

Download jquery.sidebartabs.zip and relocate the CSS and JS files wherever you want them in your project.

Load the plugin CSS in the head tag of your page:

<link rel="stylesheet" type="text/css" href="jquery.sidebartabs.css">

Load the plugin JS at the end of your body tag:

<script src="jquery.sidebartabs.js"></script>

Add the initialization code to your onReady handler:

$( function() {

$('#container').sidebarTabs( {
containerid: 'sbtab',
tabs: [
{ label: 'Tab 1', url: 'content1.html', default: true },
{ label: 'Tab 2', url: 'content2.html' },
{ label: 'Tab 3', url: 'content3.html' },
} );

} );

Simply change #container to the DOM element you want to use.

The containerid configuration option is to specify the value of the generated id attribute for the plugins created DOM element.

If you want to customize the CSS, simply override the default classes:

  • Content -- div.sidebartabs div.sbtab-target
  • Tab -- div.sidebartabs li.sbtab-tab


This project is BSD (2 clause) licensed.

photo of James Linden
Founder / Head Geek
Digital Dock, LLC
aka kodekrash & N6NRD
Collegeville, PA USA

What I Do

Linux DevOps
Web development

Full CV

What I've Done

Drowned a motorcycle
Rescued a skunk
Built Prime GNU/Linux
Contributed to Spidering Hacks