How to make Jquery UI Tabs scroll horizontally if there are too many tabs

Question

Now the image above is an example of \" too many tabs \", It appea

Answer 1

I was recently looking for a solution to this but none of the other plugins / examples seemed to work with jQuery 1.9+, I also think that Jason's answer of creating a 'more' tab and displaying any extra tabs as a drop down provides the best UI experience, and so I expanded on his answer and created a jQuery plugin for 1.9+ that extends jQuery UI tabs, if the total width of all of the tabs exceeds the width of the tabs container then the additional tabs are grouped together in a dropdown.

You can see the JSFiddle Demo to see it in action. Try resizing your browser window to see it working.

Or you can view the full plugin code at JSFiddle.

Initialising 'Overflow Tabs' is as simple as this:

$("#tabs").tabs({
    overflowTabs: true,
    tabPadding: 23, 
    containerPadding: 40,
    dropdownSize: 50
});

tabPadding is the number of pixels of padding around the text in a tab.

containerPadding is the padding of the container.

dropdownSize is the pixel size of the dropdown selector button

I have tested this on the latest versions of Chrome, Firefox, and IE. If you spot any issues or can improve this then feel free to fork it and go ahead.

Now also available on GitHub.