Lightweight, accessible vanilla JS toggle tabs.
npm install tabbyjsGetting Started | Styling | Keyboard Navigation | API | What's New | Browser Compatibility | License
Compiled and production-ready code can be found in the dist directory. The src directory contains development code.
There are two versions of Tabby: the standalone version, and one that comes preloaded with polyfills for the closest() and matches() methods, which are only supported in newer browsers.
If you're including your own polyfills, use the standalone version. Otherwise, use the version with polyfills.
Tabby also comes with two simple themes/UIs. Feel free to start with one of them and modify it for your needs, or start from scratch and build your own.
Direct Download
You can download the files directly from GitHub.
``html`
CDN
You can also use the jsDelivr CDN. I recommend linking to a specific version number or version range to prevent major updates from breaking your site. Tabby uses semantic versioning.
`html
`
NPM
You can also use NPM (or your favorite package manager).
`bash`
npm install tabbyjs
Tabby progressively enhances a linked list of content into tabbed navigation.
Provide an unordered list of content, with anchor links that point to your content. Give your tab navigation a selector you can target. In this example, it's [data-tabs], but it can be anything you want.
Add the [data-tabby-default] attribute to the tab that should be displayed by default.
`html
__Note:__ Tabby automatically adds all of the required roles, attributes, and keyboard interactions needed for proper accessibility.
$3
In the footer of your page, after the content, initialize Tabby by passing in a selector for the navigation menu. And that's it, you're done. Nice work!
html
`Styling Tabby
Tabby comes with two simple themes/UIs: standard horizontal tabs, and vertical ones. Use them as-is, modify them to meet your needs, or skip them entirely and build your own from scratch.
Horizontal UI on CodePen → | Veritical UI on CodePen → | No UI on CodePen →
__Note:__ the vertical tab layout does not include a grid. You'll need to supply your own.
You can use the
attributes that are added to the elements to progressively style them.- The list (
) has the [role="tablist"] attribute.
- Tab links () have the [role="tab"] attribute.
- Active tab links have the [aria-selected="true"] attribute.
- Tab content has the [role="tabpanel"] attribute.
- Hidden tab content has the [hidden] attribute.Keyboard Navigation
Tabby follows accessibility recommendations and expectations for keyboard navigation:
- Arrow keys (left/right and up/down) change the active tab in the navigation.
- The
Home and End buttons activate the first and last tab, respectively.
- The Tab key shifts focus into the tab content rather than to the next item in the navigation.API
Tabby includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.
$3
You can pass options and callbacks into Tabby when instantiating.
`javascript
var tabs = new Tabby('[data-tabs]', {
idPrefix: 'tabby-toggle_', // The prefix to add to tab element IDs if they don't already have one
default: '[data-tabby-default]' // The selector to use for the default tab
});
`$3
Tabby emits a custom event—
—when the active tab is changed.The
tabby event is emitted on the tab element and bubbles up. You can listen for them with the addEventListener() method. The event.detail object includes the previousTab, previousContent, tab and content elements.`js
document.addEventListener('tabby', function (event) {
var tab = event.target;
var content = event.detail.content;
}, false);
`$3
Tabby also exposes several public methods.
#### setup()
Sets up the DOM with the required roles and attributes. If you dynamically add navigation items to the DOM after Tabby is instantiated, you can run this method to set them up.
Example
javascript
var tabs = new Tabby('data-tabs');
tabs.setup();
`#### toggle()
Activate a tab. Accepts the ID of the content to activate, or a tab element, as an argument.
Example
javascript
var tabs = new Tabby('data-tabs');// With a selector
tabs.toggle('#harry');
// With an element
var neville = document.querySelector('[href*="#neville"]');
tabs.toggle(neville);
`#### destroy()
Destroy the current initialization.
Example
javascript
var tabs = new Tabby('data-tabs');
tabs.destroy();
`What's new?
Tabby got a complete rewrite in version 12. It now includes:
- Support for multiple instantiations at once.
- Proper roles and properties for accessibility.
- Keyboard navigation
- Deprecated callbacks in favor of custom events.
$3
The instantiation method is completely different, but the markup patterns in older versions should work without modification.
Kudos 👏
Special thanks to Dave Rupers A11y Nutrition Cards, which provided a solid foundation for this version.
And major kudos to accessibility specialist Scott O'Hara, who advised me on various aspects of this script throughout its development.
Browser Compatibility
Tabby works in all modern browsers, and IE 9 and above.
Tabby is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, anchor links will jump to the content instead.
$3
Support back to IE9 requires polyfills for the
and matches(). Without them, support will be spotty across browsers.Use the included polyfills version of Tabby, or include your own.
$3
Tabby uses the
[hidden] attribute to hide tab content. This attribute didn't exist prior to IE11. To push support back to IE9, make sure your stylesheet includes the following style for the [hidden] attribute.`css
[hidden] {
display: none;
}
``The code is available under the MIT License.