Tabs, one file.

API reference

The complete public surface of tabs.js v1.0.0 — constructor, options, methods, statics, events, declarative attributes, theming and accessibility.

• Usage
• Options
• Methods
• Statics
• Events
• Declarative init
• Theming
• Accessibility

Constructor & usage

var tabs = new Tabs(target, options?)

target is a CSS selector string or an Element. The constructor throws if the target cannot be found, or if no tabs are detected in the container. Constructing on an element that already has an instance destroys the old instance first. Without a DOM (SSR), the constructor returns an inert no-op instance instead of throwing. The script registers a browser global Tabs, and also supports CommonJS and AMD.

Four ways to use it:

new Tabs('.my-tabs')                 // enhance canonical markup: first child = tab strip,
                                     // following siblings = panels, in order
new Tabs('#custom')                  // custom structure: pair explicitly with
                                     // data-vtb-tab / data-vtb-panel attributes
new Tabs('#host', { tabs: [ /* … */ ] })   // builder mode: renders strip + panels from data
<div data-vtb>…</div>                // zero JS: auto-initializes on DOMContentLoaded

In canonical markup the strip's <button>s, <a>s or [role=tab] elements become the tabs; element types don't matter otherwise and panel content is left untouched. With explicit pairing, a tab matches the panel carrying the same data-vtb-panel value (valueless attributes pair by document order) and the tablist becomes the nearest ancestor containing all the tabs. In builder mode, labels and string content render with textContent; innerHTML is used only behind the explicit html: true opt-in, and an Element passed as content is moved in as-is.

Options

Change a default once for the whole page: Tabs.defaults.activation = 'manual'.

Methods

Readable instance properties: el (the container), list (the tablist element), tabs and panels (arrays of elements, index-aligned), and active (current index).

Statics & helpers

Events & callbacks

document.addEventListener('tabs:change', function (e) {
  console.log(e.detail.index, e.detail.tabs)
})

Declarative init (data-* attributes)

Add data-vtb to a container and it initializes itself with no JavaScript, on DOMContentLoaded. Options ride along as data attributes on the same container:

Theming

Automatic light/dark with the family's resolution order: <html data-theme> / data-bs-theme → .dark/.light class → prefers-color-scheme, re-resolved live as any of them change. Pin one instance with { theme: 'dark' }. All colors are CSS custom properties, defined on .vtb (light) and .vtb[data-theme=dark] (dark):

.vtb {
  --vtb-accent: #b45309;   /* active tab + sliding indicator */
}

With the VC core loaded, VC.config({ accent: '#b45309' }) themes tabs and every other family component in one call.

CSS isolation. Containers render as class="vtb vc1" and all structural rules ship salted (.vtb.vc1 .vtb-tab { … }), so host-page design systems can't override the widget — while --vtb-* variable overrides keep working (variable definitions are deliberately unsalted). Custom token: Tabs.salt = 'acme' before the first instance; disable with Tabs.salt = false.

Headless. Tabs.defaults.styles = false (or { styles: false } per instance) never injects CSS. You keep the full behavior — ARIA wiring, roving tabindex, keyboard navigation, hidden panels — and the markup contract below, styled entirely from your own CSS. The stock stylesheet is available as a starting point via Tabs.css (string) or dist/tabs.css (file).

.vtb.vtb-vertical[data-theme="dark"]     ← your container
  .vtb-list[role="tablist"]
    .vtb-tab[role="tab"][aria-selected]  ← your buttons/links
    .vtb-ink                             ← the sliding indicator (JS sets
                                            transform + width/height inline)
  .vtb-panel[role="tabpanel"][hidden]    ← your panels

Accessibility

Implements the full WAI-ARIA tabs pattern: role="tablist" (plus aria-orientation="vertical" when vertical), role="tab" with aria-selected and aria-controls, and role="tabpanel" with aria-labelledby and tabindex="0" so panel content is reachable. Inactive panels get the hidden attribute; enhanced <button>s get type="button" so they never submit a surrounding form; ids are generated only where missing.

Key presses with Alt, Ctrl or Meta held are left alone. Focus rings use :focus-visible; the indicator animation is disabled under prefers-reduced-motion: reduce.