@dontgoplastic/tab-nav v0.0.3

tab-nav

An easy-to-use, zero-dependency, and accessible tab navigation component

Demo

How to use

Create a list with corresponding content targets:

<ul id="repo-nav">
  <li data-tab-content-id="all">All</li>
  <li data-tab-content-id="public">Public</li>
  <li data-tab-content-id="private">Private</li>
</ul>

<section id="all"> ... </section>
<section id="public"> ... </section>
<section id="private"> ... </section>

Kick off a TabNav:

new TabNav('#repo-nav');

Instances can be configured with a few options:

new TabNav('#repo-nav', {
  activeClass: 'active',
  onChange: (tabElement, contentElement) => {
    // ...
  }
});

Styles

Bring your own!

What it does

• role attribute values tablist, tab, and tabpanel will be added to the list, list items, and content targets.
• tabindex="0" added to the expanded tab and all content targets.
• With a tab focused, ↑ or ← will focus the previous tab, ↓ or → the next.
• Tabs will be expanded on mouse click. Focused tabs will can be expanded by pressing either Enter or Space.
• A tab with the activeClass (or the first tab if not present) will be auto-expanded.
• All non-expanded content targets will be hidden via display: none;.
• If ids aren't already present, unique ids are auto-assigned to all tabs and content targets to facilitate aria-labelledby and aria-controls hook-up.