node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »



Never neglect your tabs when it comes to usability again! Making tabindex easy for custom elements to improve your UX.


In today's JavaScript environment with all the custom elements, it's easy to forget that tabbing is an integral part of the UX. With HTML5 you can define tabindex on any property, but you need additional functionality for it to do anything useful. That's where Tabby becomes useful! By emitting two custom events when tabbing occurs, you can define the behaviour with ease.


Install with npm: npm install tabby-js

Getting Started

Tabby emits two custom events for you to listen for. These can be listened to the vanilla JavaScript way (.addEventListener('tabEnter')) or the jQuery way (.on('tabEnter')) – other libraries are supported as long as they tap into the vanilla JavaScript events.


Emitted when an element with a `tabindex` attribute has focus with the tab key – allowing you to highlight the element, or to open your faux-select.


Emitted irrespective of whether the tab key was involved (an alias of `onblur`) – allowing you to reset the element's state.
// Emitted when a user tabs into the box. 
elements.on('tabEnter', function() {
// Emitted each and every time (same as onblur). 
elements.on('tabLeave', function() {


I'd be over the moon for contributions for any of my projects – including of course Tabby! If you would like to contribute, please fork and issue a pull request and I'll happily merge it in to master.