node package manager




Build Status Dependency Status

Selenium Test Status

HTML UI Toolkit tabs component - Create interactive tabs in JS.

Check out the example!


<div id="my-tabs" class="hut-tabs">
    <ul class="tabs-list">
    <div class="tabs-section">
        General boring information here...
    <div class="tabs-section">
        such tabs
    <div id="kittens" class="tabs-section">
        I can haz tabs?
var tabs = require('hut-tabs');
var myTabs = tabs(document.querySelector('#my-tabs'));
// Select the first tab;
// Select the kittens tab'#kittens'));

JS Reference


Creates a new tabs component and attaches the event handlers. It will return a new Tabs object. The first tab is automatically selected.


The DOM node for the currently selected .tabs-section, or null if no section is selected.


Selects a tab section. If section is a number, it will select the section at that index (for example will select the first section). If section is a DOM element, it will select the section with element. The element must be one of the .tabs-section elements.

Event: select(section)

Triggered when a new section is selected. section will be the DOM node for the selected .tabs-section.


To change the style, change the variables defined in the variables.css file or override the styles with your own.