Menu

Tabs

Simple, mobile-friendly tabs.

Demos

Basic

Create a set of tabs using links.

<nav class="tabs_menu">
  <a href="#tab-1" class="tabs_link js-tabs" data-tabs-group="tabs" data-tabs-active="true">
    Tab One
  </a>
  <a href="#tab-2" class="tabs_link js-tabs" data-tabs-group="tabs">
    Tab Two
  </a>
  <a href="#tab-3" class="tabs_link js-tabs" data-tabs-group="tabs">
    Tab Three
  </a>
</nav>
<div class="tabs_item" id="tab-1">
  Target One
</div>
<div class="tabs_item" id="tab-2">
  Target Two
</div>
<div class="tabs_item" id="tab-3">
  Target Three
</div>
import { Tabs, Utils } from 'formstone';

Utils.ready(() =&gt; {
  Tabs.construct('.js-tabs', {
    mobileMaxWidth: '500px',
  });
});
body {
  padding: 10vh;
}

.tabs_menu {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.tabs_link,
.fs-tabs-tab_mobile {
  background: var(--color-blue);
  border: var(--border-size) solid var(--color-black);
  border-radius: var(--border-size);
  color: var(--color-black);
  line-height: 1;
  padding: 10px 15px;
  text-decoration: none;
}

.fs-tabs-tab_mobile {
  width: 100%;
  margin-bottom: 10px;
}

.tabs_item.fs-tabs-active + .fs-tabs-tab_mobile {
  margin-top: 10px;
}

.tabs_link.fs-tabs-active,
.fs-tabs-tab_mobile.fs-tabs-active {
  background: var(--color-yellow);
}

.tabs_item {
  background: var(--color-gray-5);
  border: var(--border-size) solid var(--color-black);
  border-radius: var(--border-size);
  padding: 20px;
}

Options

Set instance options by passing a valid object at initialization, or to the public .defaults() method. Custom options for a specific instance can also be set by attaching a data-tabs-options attribute containing a properly formatted JSON object to the target element.

Name Type Default Description
maxWidth string | number Infinity Maximum viewport width to enable tabs
mobileMaxWidth string | number '740px' Maximum viewport width for mobile tab mode
automatic boolean true Automatically activate focused tabs with keyboard navigation
label string 'Tabs' Accessibility label for the tablist

Data attributes provide configuration options and can be set directly on the target element.

Name Type Description
data-tabs-options string (JSON) JSON encoded object containing instance options
data-tabs-container string Selector for tablist container element
data-tabs-group string Group key for related tab links
data-tabs-active string Marks a tab as active on initialization

Methods

Methods are publicly available to all active instances, unless otherwise stated.

Name Description
.activate() Activates instance
.construct() Initializes plugin on target elements
.deactivate() Deactivates instance
.defaults() Sets default options for future initialization
.destroy() Removes plugin and all related data
.disable() Disables instance
.enable() Enables instance

.activate()

Activates instance.

Examples

el.Tabs.activate();

.construct()

Initializes plugin on target elements.

Parameters

Name Type Default Description
selector string (required) '' Selector string to target
options object (optional) {} Object containing instance options

Returns

Type Description
NodeList NodeList of target elements

Examples

let targets = Tabs.construct('.js-tabs');
Tabs.construct('.js-tabs', { automatic: false });
let targets = Tabs.construct('.js-tabs', {
  mobileMaxWidth: '500px'
});

.deactivate()

Deactivates instance.

Examples

el.Tabs.deactivate();

.defaults()

Sets default options for future initialization.

Parameters

Name Type Default Description
options object (required) {} Object containing default options

Examples

Tabs.defaults({
  automatic: false,
  mobileMaxWidth: '500px'
});

.destroy()

Removes plugin and all related data.

Examples

el.Tabs.destroy();

.disable()

Disables instance.

Examples

el.Tabs.disable();

.enable()

Enables instance.

Examples

el.Tabs.enable();

Events

Events are triggered on the target instance's element, unless otherwise stated.

Name Description
tabs:activate Tab activated
tabs:deactivate Tab deactivated
tabs:disable Tab disabled
tabs:enable Tab enabled

Styles

Classes allow deeper customization and indicate the current state of a specific instance.

Classname Type Description
.fs-tabs-tab element Target element
.fs-tabs-tab_mobile element Mobile tab element
.fs-tabs-content element Content element
.fs-tabs-container element Tab container element
.fs-tabs-enabled modifier Indicates enabled state
.fs-tabs-active modifier Indicates active state
.fs-tabs-inactive modifier Indicates inactive state
.fs-tabs-mobile modifier Indicates mobile tab mode