Tabs

WAI-ARIA compliant tabs pattern implementation in TypeScript.

Install

npm i @y14e/tabs

// npm
import Tabs from '@y14e/tabs';

// CDNs
import Tabs from 'https://esm.sh/@y14e/tabs'
// or
import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs/+esm';
// or
import Tabs from 'https://unpkg.com/@y14e/tabs/dist/index.js';

Usage

new Tabs(root, options);
// => Tabs
//
// root: HTMLElement
// options (optional): TabsOptions

🪄 Options

interface TabsOptions {
  animation?: {
    content?: {
      crossFade?: boolean;   // default: true
      duration?: number;     // ms (default: 300)
      easing?: string;       // <easing-function> (default: 'ease')
      fade?: boolean;        // default: false
    };
    indicator?: {
      duration?: number;     // ms (default: 300)
      easing?: string;       // <easing-function> (default: 'ease')
    };
  };
  avoidDuplicates?: boolean; // default: false
  manual?: boolean;          // default: false
  selector?: {
    content?: string;        // default: '[role="tablist"] + *'
    indicator?: string;      // default: '[data-tabs-indicator]'
    list?: string;           // default: '[role="tablist"]'
    panel?: string;          // default: '[role="tabpanel"]'
    tab?: string;            // default: '[role="tab"]'
  };
  vertical?: boolean;        // default: false
}

avoidDuplicates

If true, only the first tab list remains interactive; subsequent duplicates are excluded from focus and navigation.

⚙️ Customize defaults

Override the global default settings applied to all accordion instances.

import Tabs from '@y14e/tabs';

Tabs.defaults = {
  animation: {
    content: {
      crossFade: false,
      duration: 1000,
      fade: true,
    }
  },
  manual: true,
};

new Tabs(root);

📦 APIs

activate

tabs.activate(tab);
// => void
//
// tab: HTMLElement

destroy

Destroys the instance and cleans up all event listeners.

tabs.destroy(force);
// => Promise<void>
//
// force (optional): If true, skips waiting for animations to finish.

Demo

https://y14e.github.io/tabs/