Origami Frontend Components & Services

Readme: o-tabs

Tabs component for dividing content into meaningful sections.


Check out how to include Origami components in your project to get started with o-tabs.


The tablist, tabs and tabpanels must be identified by ARIA role attributes.

The tab elements must contain a link whose href attribute points to the ID of a tabpanel element.

The tabpanel elements must have a o-tabs__tabpanel class added to them.

This is an example of an HTML structure that o-tabs will accept:

<div data-o-component="o-tabs" class="o-tabs o-tabs--buttontabs  o-tabs--secondary" role="tablist">
    <a role="tab" aria-controls="tabContent1" href="#tabContent1" >Tab 1</a>
    <a role="tab" aria-controls="tabContent2" href="#tabContent2">Tab 2</a>
    <a role="tab" aria-controls="tabContent3" href="#tabContent3">Tab 3</a>
<div id="tabContent1" class="o-tabs__tabpanel">
    Tab content 1
<div id="tabContent2" class="o-tabs__tabpanel">
    Tab content 2
<div id="tabContent3" class="o-tabs__tabpanel">
        Note: first elements of each tab will get focused when it is selected. In this case, this div will receive focus.
    Tab content 3

To set the initially selected tab, add an aria-selected="true" attribute to a tab element, otherwise the first tab will be selected automatically.


You can set config options declaratively by using [data-o-tabs-] prefixed data attributes.

Options consist of:

Core experience

Without the accompanying JavaScript, the tabs will receive no styling, and all tabpanels will remain visible. It's recommended that the default styling is to have each of the tabpanels displayed one below the other.

A product may choose to hide the tabs like this:

.o-tabs { display: none; }
.o-tabs--js { display: block; }


ARIA attributes will be set on elements as follows:

On init, aria-controls is added to each tab element, with value being the ID of the associated tabpanel.

On init and selected tab change these attributes are set and updated as appropriate:

These state attributes are used by the o-tabs CSS.



A o.DOMContentLoaded event can be dispatched on the document to auto-construct a o-tabs object for each element with a data-o-component="o-tabs" attribute:

document.addEventListener("DOMContentLoaded", function() {
    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));

Auto-construction can be disabled for a specific element via another data attribute (data-o-tabs-autoconstruct="false").

Note that for browsers that do not support DOMContentLoaded (IE8 etc), the event could be polyfilled, or construction can be manually invoked:

import Tabs from '@financial-times/o-tabs';
const tabsObjects = Tabs.init(document.body);

An array of any constructed Tabs objects will be returned.

Tabs.init(config) will not create Tabs objects for elements that already have Tabs objects constructed on them, therefore it's safe to call more than once on the same page region.


import Tabs from '@financial-times/o-tabs';
const myTabs = new Tabs(document.getElementById('myTabsRootElement'), {


The following events will be dispatched on the Tabs' root DOM element:


Tabs are indexed starting from 0.

The following API methods are provided:


o-tabs comes with either base styling, which should be used as a base for you to add your own styling. Or full styling called buttontabs; based on the buttons from o-buttons).

To apply the buttontabs styling, add a o-tabs--buttontabs class to the root element:

<ul data-o-component="o-tabs" class="o-tabs o-tabs--buttontabs" role="tablist">

The buttontabs style comes in two sizes that conform to the o-buttons sizes: medium and big. Medium is the default size and big can be applied by adding the class o-tabs--big.


Mixin: oTabs

Output all default oTabs styles using oTabs.

@include oTabs();

Set oTabs options to output more sizes and variations of button tabs (types and themes of buttons from o-buttons).

@include oTabs($opts: (
    'sizes': ('big'), //.o-tabs--big
    'button-tabs': (
        ('type': 'primary'), //.o-tabs--primary
        ('type': 'secondary'), //.o-tabs--secondary
        ('type': 'secondary', 'theme': 'inverse'), //.o-tabs--secondary.o-tabs--inverse


This table outlines all of the possible sizes you can request in the oTabs mixin:

Size Notes Brand support
big Included by default core, internal, whitelabel


This table outlines the button types you can request in the oTabs mixin. All of these are types from o-buttons:

Type Notes Brand support
secondary Included by default core, internal, whitelabel
primary Included by default core, internal, whitelabel


This table outlines some of the possible button themes you can request in the oTabs mixin along with button types. All of these are themes from o-buttons:

Theme Notes Brand support
inverse Included by default core, internal
mono Not included by default core, internal
b2c Not included by default core

Keyboard Support

When focus is within the tab list

Key Function
Tab When focus moves into the tab list, places focus on the active tab element. When the tab list already contains the focus, moves focus to the next element in the page tab sequence outside the tablist.
Left Arrow Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Activates the tabpanel which is associated with the newly focused tab.
Right Arrow Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Activates the tabpanel which is associated with the newly focused tab.
Space or Enter Activates the tabpanel which is associated with the focused tab if it was not already activated.

Migration Guide

State Major Version Last Minor Release Migration guide
✨ active 6 N/A migrate to v7
⚠ maintained 6 6.2 migrate to v6
⚠ maintained 5 5.0 migrate to v5
⚠ maintained 4 4.3 migrate to v4
╳ deprecated 3 3.0 N/A
╳ deprecated 2 2.2 N/A
╳ deprecated 1 1.0 N/A


If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.


This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub: o-tabs@8.1.3

Install o-tabs

If using the Build Service, add o-tabs@^8.1.3 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-tabs@^8.1.3".

Help & Support

o-tabs is maintained directly by the Origami team. If you have any questions about o-tabs or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com