About

Very usefull script when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit.

  • works only with horizontal tabs and pills
  • custom text for the dropdown tab
  • works with responsive design

Download

Change log

16/2/2013
Initial release

Example

Basic exemple. Resize the window to see how the tabs are moved into the dropdown

I'm in Section 1.

Howdy, I'm in Section 2.

Howdy, I'm in Section 3.

Howdy, I'm in Section 4.

Howdy, I'm in Section 5.

Howdy, I'm in Section 6.

Howdy, I'm in Section 7.

Howdy, I'm in Section 8.

Howdy, I'm in Section 9.

With tabs on the bottom and custom text for the dropdown tab.

I'm in Section 1.

Howdy, I'm in Section 2.

Howdy, I'm in Section 3.

Howdy, I'm in Section 4.

Howdy, I'm in Section 5.

Howdy, I'm in Section 6.

Howdy, I'm in Section 7.

Howdy, I'm in Section 8.

Howdy, I'm in Section 9.

With pills.

I'm in Section 1.

Howdy, I'm in Section 2.

Howdy, I'm in Section 3.

Howdy, I'm in Section 4.

Howdy, I'm in Section 5.

Howdy, I'm in Section 6.

Howdy, I'm in Section 7.

Howdy, I'm in Section 8.

Howdy, I'm in Section 9.


Using bootstrap-tabdrop.js

Call the tab drop via javascript on .nav-tabs and .nav-pills:

$('.nav-pills, .nav-tabs').tabdrop()

Options

Name type default description
text string '<i class="icon-align-justify"></i>' the text for the dropdown tab

Markup

Nothing special. It uses the format from tabs and pills.

Methods

.tabdrop(options)

Initializes an tab drop.

.tabdrop('layout')

Checks if the tabs fit in one single row.