Tabs

Overview

Tabs organize related content into multiple views without leaving the current page. MiniKit provides an accessible custom element with automatic ARIA management, keyboard navigation, and synchronized tab panels.

Basic Usage

Wrap your tabs inside an mk-tabs element. Place the tab buttons inside a role="tablist" container followed by the corresponding tab panels.

<mk-tabs>
  <div role="tablist">
    <button role="tab" aria-selected="true">HTML</button>
    <button role="tab">CSS</button>
    <button role="tab">JavaScript</button>
  </div>

  <section role="tabpanel">
    HTML is used to structure web pages using semantic elements.
  </section>

  <section role="tabpanel">
    CSS controls layout and presentation.
  </section>

  <section role="tabpanel">
    JavaScript adds interactivity.
  </section>
</mk-tabs>

MiniKit automatically generates the required IDs and ARIA relationships when they are not provided.

Default Tab

Set the initially active tab using aria-selected="true". If no tab is marked as selected, MiniKit automatically activates the first tab.

<mk-tabs>
  <div role="tablist">
    <button role="tab">Overview</button>
    <button role="tab" aria-selected="true">API</button>
    <button role="tab">Examples</button>
  </div>

  <section role="tabpanel">
    Overview content.
  </section>

  <section role="tabpanel">
    API documentation.
  </section>

  <section role="tabpanel">
    Example content.
  </section>
</mk-tabs>

Disabled Tabs

Disable tabs that are temporarily unavailable using the native disabled attribute.

<mk-tabs>
  <div role="tablist">
    <button role="tab" aria-selected="true">
      Available
    </button>

    <button role="tab" disabled>
      Coming Soon
    </button>
  </div>

  <section role="tabpanel">
    Available content.
  </section>

  <section role="tabpanel">
    Future content.
  </section>
</mk-tabs>

Disabled tabs remain visible but cannot receive focus or be activated until they are enabled.

Programmatic Control

The active tab can be controlled through the activeIndex property exposed by the mk-tabs element.

const tabs = document.querySelector('mk-tabs');
tabs.activeIndex = 2;
console.log(tabs.activeIndex);

Updating activeIndex automatically activates the corresponding tab and panel.

Events

MiniKit emits a custom tab-change event whenever the active tab changes.

const tabs = document.querySelector('mk-tabs');
tabs.addEventListener('tab-change', (event) => {
  console.log(event.detail.index);
  console.log(event.detail.tab);
  console.log(event.detail.panel);
});

The event detail contains the active tab index, the selected tab element, and its associated panel.

Accessibility

MiniKit follows the WAI-ARIA Tabs design pattern and automatically manages keyboard navigation and ARIA relationships.

• Navigate between tabs using the Left and Right arrow keys.
• Press Home to move to the first tab.
• Press End to move to the last tab.
• Focus automatically moves to the newly activated tab during keyboard navigation.
• MiniKit automatically synchronizes aria-selected, aria-controls, and aria-labelledby.
• Inactive panels are automatically hidden using the hidden attribute.
• IDs are generated automatically when they are not provided.

API

Markup

JavaScript