Tabs

Tabs consist of two or more tab items created for navigating between different sections of content.

Guidelines

Using tabs

Each tab will display different sections within the same context. For example, tabs can display different sections of an article, different topics or different edit views.

Specifications

The Tabs component always contains two or more Tab items.

Specification of Tab items.

Tabs include the following elements:

Selected tab
Within the tabs component, only one tab item can be selected at a time.
Unselected tabs
The remaining tab items will remain unselected. Users can choose these tabs by clicking on them or navigating to them via the keyboard’s arrow keys.
Arrow button
When tabs become scrollable, one or two icon-only buttons will appear. The number of buttons to scroll tabs will vary based on the tabs' scroll position. Users can utilize these buttons to navigate through the scrollable tabs.

Each Tabs component will contain a minimum of 2 tab items. There is no maximum limit to the number of tab items per Tabs.

The maximum width for each tab item is @size-1600 (equivalent to 256px in the default Codex theme), with an ellipsis appearing if the text exceeds this length.

When there is not enough space to display all tabs, scrolling will be activated. When the scroll is enabled, the positions of the tabs will be indicated by arrow buttons:

Initial position: Due to the tabs being in the first position, only the end arrow button will be visible at the end to scroll the tabs.
Middle position: Both the start and end arrow buttons will be visible.
End position: As scrolling reaches the end, only the start arrow will be visible in order to scroll the tabs from the end to the beginning.

Scrollable Tabs with arrows indicating scroll-ability.

Refer to the Tabs component in Codex Figma.

Types

Depending on the tabs' style and where they are employed, there are two types of tabs:

Quiet tabs

These tabs feature a transparent background with a Gray400 underline to delineate the tabs base. The selected tab is highlighted in blue with a blue line underneath. These tabs are intended for use on open white backgrounds, and it is not recommended to use them within boxes or modules.

Example of quiet Tabs.

Framed tabs

These tabs have a Gray200 background, with the selected tab appearing in white. They are designed to be used within boxes or modules, where the gray background serves as a head for the box. It is not recommended to use framed tabs outside of a box context; in such cases, use the quiet tabs instead.

Example of framed Tabs.

Interaction states

The Tabs component itself does not have distinct states. Instead, individual states will be attributed to each Tab item.

Tabs with the first tab item selected and the third one in a hover state.

Best practices

Consider the following recommendations when using Tabs.

Tabs with its items navigating to related content.

Do:

Use Tabs to navigate between various sections of related content.

Tabs with its items navigating to sections of the same page.

Don't:

Use Tabs to structure content meant to be consumed sequentially, like the sections within an article page.

Content

Tabs allow a reader to access contained, structured content blocks that make pages easier to read. To make the UI effective and consistent, keep tab names short and descriptive.

Tabs conveying an example of short, concise titles for sections.

Do:

Limit tab names to one or two words. Concise & Clear

Tabs conveying an example of mixing verbs and nouns.

Don't:

Mix verbs and nouns for the labels. Consistent & Clear

Key	Function
`Tab`	It moves the focus to the next interactive element in tab order.
`Shift` + `Tab`	It moves the focus to the previous interactive element.
`Left arrow` / `Right arrow`	When focusing on a Tab item, the arrow keys navigate between the rest of Tab items.

Demos

Basic Example

Two stylistic variants are available, quiet (the default) and framed.

Sand cat

The sand cat (Felis margarita), also known as the sand dune cat, is a small wild cat that inhabits sandy and stony deserts far from water sources. With its sandy to light grey fur, it is well camouflaged in a desert environment.

View source for Sand cat

 The '''sand cat''' (''Felis margarita''), also known as the '''sand dune cat''', is a small wild [[Felis|cat]] that inhabits sandy and stony [[deserts]] far from water sources. With its sandy to light grey fur, it is well camouflaged in a desert environment.

NPMMediaWiki

vue

<template>
	<cdx-tabs v-model:active="currentTab" :framed="framed">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
		>
			<!-- Tab content -->
			<h2>{{ tab.heading }}</h2>

			<template v-if="tab.name === 'read'">
				<p>
					The <b>sand cat</b> (<i>Felis margarita</i>), also known as
					the <b>sand dune cat</b>, is a small wild
					<a href="#" title="Felis">cat</a> that inhabits
					sandy and stony <a href="#" title="Desert">deserts</a>
					far from water sources. With its sandy to light grey fur, it
					is well camouflaged in a desert environment.
				</p>
			</template>
			<template v-if="tab.name === 'source'">
				<code>
					The '''sand cat''' (''Felis margarita''), also known as the
					'''sand dune cat''', is a small wild [[Felis|cat]] that
					inhabits sandy and stony [[deserts]] far from water sources.
					With its sandy to light grey fur, it is well camouflaged in
					a desert environment.
				</code>
			</template>
			<template v-if="tab.name === 'history'">
				<h3>Revisions</h3>
				<ul>
					<li>Revision 3</li>
					<li>Revision 2</li>
					<li>Revision 1</li>
				</ul>
			</template>
		</cdx-tab>
	</cdx-tabs>
</template>

<script>
import { CdxTabs, CdxTab } from '@wikimedia/codex';
import { defineComponent } from 'vue';

export default defineComponent( {
	name: 'BasicTabs',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		framed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			tabsData: [ {
				name: 'read',
				label: 'Read',
				heading: 'Sand cat'
			}, {
				name: 'source',
				label: 'View source',
				heading: 'View source for Sand cat'
			}, {
				name: 'history',
				label: 'View history',
				heading: 'Sand cat: Revision history'
			} ],

			currentTab: 'read'
		};
	}
} );
</script>

vue

<template>
	<cdx-tabs v-model:active="currentTab" :framed="framed">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
		>
			<!-- Tab content -->
			<h2>{{ tab.heading }}</h2>

			<template v-if="tab.name === 'read'">
				<p>
					The <b>sand cat</b> (<i>Felis margarita</i>), also known as
					the <b>sand dune cat</b>, is a small wild
					<a href="#" title="Felis">cat</a> that inhabits
					sandy and stony <a href="#" title="Desert">deserts</a>
					far from water sources. With its sandy to light grey fur, it
					is well camouflaged in a desert environment.
				</p>
			</template>
			<template v-if="tab.name === 'source'">
				<code>
					The '''sand cat''' (''Felis margarita''), also known as the
					'''sand dune cat''', is a small wild [[Felis|cat]] that
					inhabits sandy and stony [[deserts]] far from water sources.
					With its sandy to light grey fur, it is well camouflaged in
					a desert environment.
				</code>
			</template>
			<template v-if="tab.name === 'history'">
				<h3>Revisions</h3>
				<ul>
					<li>Revision 3</li>
					<li>Revision 2</li>
					<li>Revision 1</li>
				</ul>
			</template>
		</cdx-tab>
	</cdx-tabs>
</template>

<script>
const { CdxTabs, CdxTab } = require( '@wikimedia/codex' );
const { defineComponent } = require( 'vue' );

// @vue/component
module.exports = defineComponent( {
	name: 'BasicTabs',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		framed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			tabsData: [ {
				name: 'read',
				label: 'Read',
				heading: 'Sand cat'
			}, {
				name: 'source',
				label: 'View source',
				heading: 'View source for Sand cat'
			}, {
				name: 'history',
				label: 'View history',
				heading: 'Sand cat: Revision history'
			} ],

			currentTab: 'read'
		};
	}
} );
</script>

Name	Value
Props
framed
View
Reading direction	Left to right (LTR) Right to left (RTL)

Header row scroll

When the width of the header row exceeds the width of its container, arrow buttons will appear to enable scrolling through tab names.

Content for tab1

This is the content for the First Tab

NPMMediaWiki

vue

<template>
	<cdx-tabs v-model:active="currentTab" :framed="framed">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
			:disabled="tab.disabled"
		>
			<h2>Content for {{ tab.name }}</h2>
			<p>
				This is the content for the {{ tab.label }}
			</p>
		</cdx-tab>
	</cdx-tabs>
</template>

<script>
import { CdxTabs, CdxTab } from '@wikimedia/codex';
import { defineComponent } from 'vue';

const tabsData = [ {
	name: 'tab1',
	label: 'First Tab'
}, {
	name: 'tab2',
	label: 'Second Tab with a really really really really long name'
}, {
	name: 'tab3',
	label: 'Third Tab'
}, {
	name: 'tab4',
	label: 'Fourth Tab',
	disabled: true
}, {
	name: 'tab5',
	label: 'Fifth Tab'
}, {
	name: 'tab6',
	label: 'Sixth Tab'
} ];

export default defineComponent( {
	name: 'ManyTabs',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		framed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			tabsData,
			currentTab: 'tab1'
		};
	}
} );
</script>

vue

<template>
	<cdx-tabs v-model:active="currentTab" :framed="framed">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
			:disabled="tab.disabled"
		>
			<h2>Content for {{ tab.name }}</h2>
			<p>
				This is the content for the {{ tab.label }}
			</p>
		</cdx-tab>
	</cdx-tabs>
</template>

<script>
const { CdxTabs, CdxTab } = require( '@wikimedia/codex' );
const { defineComponent } = require( 'vue' );

const tabsData = [ {
	name: 'tab1',
	label: 'First Tab'
}, {
	name: 'tab2',
	label: 'Second Tab with a really really really really long name'
}, {
	name: 'tab3',
	label: 'Third Tab'
}, {
	name: 'tab4',
	label: 'Fourth Tab',
	disabled: true
}, {
	name: 'tab5',
	label: 'Fifth Tab'
}, {
	name: 'tab6',
	label: 'Sixth Tab'
} ];

// @vue/component
module.exports = defineComponent( {
	name: 'ManyTabs',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		framed: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			tabsData,
			currentTab: 'tab1'
		};
	}
} );
</script>

Name	Value
Props
framed
View
Reading direction	Left to right (LTR) Right to left (RTL)

Dynamic replacement of slot content

The Tabs component will re-render if the provided slot content changes. Clicking the button below will replace the initial tabs with a new set; the header row will update to match.

Content for tab1

This is the content for the First Tab

NPMMediaWiki

vue

<template>
	<cdx-tabs v-model:active="currentTab">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
		>
			<h2>Content for {{ tab.name }}</h2>
			<p>
				This is the content for the {{ tab.label }}
			</p>
		</cdx-tab>
	</cdx-tabs>

	<cdx-button @click="swapTabs">
		Swap out tabs
	</cdx-button>
</template>

<script>
import { CdxTabs, CdxTab, CdxButton } from '@wikimedia/codex';
import { defineComponent } from 'vue';

const firstSetOfTabs = [ {
	name: 'tab1',
	label: 'First Tab'
}, {
	name: 'tab2',
	label: 'Second Tab'
}, {
	name: 'tab3',
	label: 'Third Tab'
} ];

const secondSetOfTabs = [ {
	name: 'tab4',
	label: 'Fourth Tab'
}, {
	name: 'tab5',
	label: 'Fifth Tab'
}, {
	name: 'tab6',
	label: 'Sixth Tab'
} ];

export default defineComponent( {
	name: 'DynamicallyGeneratedTabs',
	components: {
		CdxTabs,
		CdxTab,
		CdxButton
	},
	data() {
		return {
			tabsData: firstSetOfTabs,
			currentTab: 'tab1'
		};
	},

	methods: {
		swapTabs() {
			if ( this.tabsData[ 0 ].name === 'tab1' ) {
				this.tabsData = secondSetOfTabs;
			} else {
				this.tabsData = firstSetOfTabs;
			}

			this.currentTab = this.tabsData[ 0 ].name;
		}
	}
} );
</script>

vue

<template>
	<cdx-tabs v-model:active="currentTab">
		<cdx-tab
			v-for="( tab, index ) in tabsData"
			:key="index"
			:name="tab.name"
			:label="tab.label"
		>
			<h2>Content for {{ tab.name }}</h2>
			<p>
				This is the content for the {{ tab.label }}
			</p>
		</cdx-tab>
	</cdx-tabs>

	<cdx-button @click="swapTabs">
		Swap out tabs
	</cdx-button>
</template>

<script>
const { CdxTabs, CdxTab, CdxButton } = require( '@wikimedia/codex' );
const { defineComponent } = require( 'vue' );

const firstSetOfTabs = [ {
	name: 'tab1',
	label: 'First Tab'
}, {
	name: 'tab2',
	label: 'Second Tab'
}, {
	name: 'tab3',
	label: 'Third Tab'
} ];

const secondSetOfTabs = [ {
	name: 'tab4',
	label: 'Fourth Tab'
}, {
	name: 'tab5',
	label: 'Fifth Tab'
}, {
	name: 'tab6',
	label: 'Sixth Tab'
} ];

// @vue/component
module.exports = defineComponent( {
	name: 'DynamicallyGeneratedTabs',
	components: {
		CdxTabs,
		CdxTab,
		CdxButton
	},
	data() {
		return {
			tabsData: firstSetOfTabs,
			currentTab: 'tab1'
		};
	},

	methods: {
		swapTabs() {
			if ( this.tabsData[ 0 ].name === 'tab1' ) {
				this.tabsData = secondSetOfTabs;
			} else {
				this.tabsData = firstSetOfTabs;
			}

			this.currentTab = this.tabsData[ 0 ].name;
		}
	}
} );
</script>

Vue usage

One or more Tab components must be provided in the default slot of the Tabs component. Each child Tab component must have a name property. The Tabs component must have an active prop that matches the name of one of the child Tab components in the slot.

In order for the active tabs to change, the name of the active tab must be bound in the parent somehow, either using v-model:active or by manually binding the active prop and listening for update:active events.

Props

Prop name	Description	Type	Default
`active`^(required)	The `name` of the currently active Tab in the layout. Provided by `v-model:active` binding in the parent component.	`string`
`framed`	Whether or not the component should be displayed in a framed visual style.	`boolean`	`false`

Methods

Method name	Description	Signature
`select`	Programmatically select a tab based on its "name" prop	Params: tabName `string` - The name of the tab to select setFocus `boolean` - Whether or not to also set focus to the new tab Returns: `void`
`next`	Set the next tab to active, if one exists	Params: setFocus `boolean` - Returns: `void`
`prev`	Set the previous tab to active, if one exists	Params: setFocus `boolean` - Returns: `void`

Events

Event name	Properties	Description
`update:active`	active `string` - The `name` of the current active tab	Emitted whenever the active tab changes

Slots

Name	Description	Bindings
default	One or more Tab components must be provided here

CSS-only version

Markup structure

The non-JS version of the Tabs component should be seen as a navigational tool. It relies on HTML form submission to trigger a change in the current active tab. When the user clicks on a tab button (or hits Enter while tab button is focused), the browser will load a new page.

Basic setup:

The outermost element should be a <div> element with the class "cdx-tabs".
The cdx-tabs__header element should be a <form> with the following attributes:
- method="get": we will send the form with a GET request
- action="myURL": The value of action should be whatever URL the form data will be sent to; in this example it's simply the same URL as the page, but appended with a different URL query parameter based on the user's tab selection. In a real-world use-case, this might be a URL that can accept query parameters (say for performing a different kind of search based on which tab the user selects).
Within the tablist element, every tab label is represented by a <button> element (this is the same as in the Vue version). However, since we are submitting the data as a form, each tab button must contain a name and a value attribute. In a real application, this might correspond to key-value pairs used for a given query parameter.
The tab corresponding to the current view should contain the aria-selected="true" attribute. All other tabs should have aria-selected="false". If you are using a server-side templating language like Mustache, this should be set there.
Each tab should also have an aria-controls attribute with a value of the ID of the corresponding tabpanel.
Don't mess with <button> tabindex – since the CSS-only version of this component has no way to bind left and right arrow keys to handler methods, the user is going to need to rely on the mouse or the tab key to navigate between tabs.
To disable a tab, simply add a disabled attribute to that tab's <button> in the tablist.

The tabs below have long labels, making the tab list too long for its container. When this happens, you can horizontally scroll to reach the rest of the tabs list.

WARNING

Keyboard navigation between tabs can only be done via the Tab key. Arrow keys will not work here.

html

	<!-- Wrapper div. -->
	<div class="cdx-tabs">
		<!-- Header with tab buttons -->
		<form class="cdx-tabs__header" method="get" action="">
			<!-- List of tabs. -->
			<div class="cdx-tabs__list" tabindex="-1" role="tablist">
				<!-- Tab list item. -->
				<button
					id="form-tabs-1-label"
					class="cdx-tabs__list__item"
					role="tab"
					aria-selected="false"
					aria-controls="form-tabs-1"
					value="form-tabs-1"
					name="tab"
				>
					Tab number one
				</button>
				<button
					id="form-tabs-2-label"
					class="cdx-tabs__list__item"
					role="tab"
					aria-selected="false"
					aria-controls="form-tabs-2"
					value="form-tabs-2"
					name="tab"
				>
					Tab number two with a longer label
				</button>
				<button
					id="form-tabs-3-label"
					class="cdx-tabs__list__item"
					role="tab"
					aria-selected="false"
					aria-controls="form-tabs-3"
					value="form-tabs-3"
					name="tab"
					disabled
				>
					Tab number three
				</button>
				<button
					id="form-tabs-4-label"
					class="cdx-tabs__list__item"
					role="tab"
					aria-selected="false"
					aria-controls="form-tabs-4"
					value="form-tabs-4"
					name="tab"
				>
					Tab number four
				</button>
			</div>
		</form>
		<!-- Tabs. -->
		<div class="cdx-tabs__content">
			<!-- <section> element for each tab, with any content inside. -->
			<section
				id="form-tabs-1"
				aria-hidden="true"
				aria-labelledby="form-tabs-1-label"
				class="cdx-tab"
				role="tabpanel"
				tabindex="-1"
			>
				Tab 1 content
			</section>
			<section
				id="form-tabs-2"
				aria-hidden="true"
				aria-labelledby="form-tabs-2-label"
				class="cdx-tab"
				role="tabpanel"
				tabindex="-1"
			>
				Tab 2 content
			</section>
			<section
				id="form-tabs-3"
				aria-hidden="true"
				aria-labelledby="form-tabs-3-label"
				class="cdx-tab"
				role="tabpanel"
				tabindex="-1"
			>
				Tab 3 content
			</section>
			<section
				id="form-tabs-4"
				aria-hidden="true"
				aria-labelledby="form-tabs-4-label"
				class="cdx-tab"
				role="tabpanel"
				tabindex="-1"
			>
				Tab 4 content
			</section>
		</div>
	</div>

Tabs

Guidelines

Using tabs

Specifications

Types

Quiet tabs

Framed tabs

Interaction states

Best practices

Content

Keyboard navigation

Demos

Basic Example

Sand cat

View source for Sand cat

Sand cat: Revision history

Revisions

Header row scroll

Content for tab1

Content for tab2

Content for tab3

Content for tab4

Content for tab5

Content for tab6

Dynamic replacement of slot content

Content for tab1

Content for tab2

Content for tab3

Vue usage

Props

Methods

Events

Slots

CSS-only version

Markup structure

Basic setup:

Tabs ​

Guidelines ​

Using tabs ​

Specifications ​

Types ​

Quiet tabs ​

Framed tabs ​

Interaction states ​

Best practices ​

Content ​

Keyboard navigation ​

Demos ​

Basic Example ​

Sand cat

Header row scroll ​

Content for tab1

Dynamic replacement of slot content ​

Content for tab1

Vue usage ​

Props ​

Methods ​

Events ​

Slots ​

CSS-only version ​

Markup structure ​

Basic setup: ​

Tabs

Guidelines

Using tabs

Specifications

Types

Quiet tabs

Framed tabs

Interaction states

Best practices

Content

Keyboard navigation

Demos

Basic Example

Header row scroll

Dynamic replacement of slot content

Vue usage

Props

Methods

Events

Slots

CSS-only version

Markup structure

Basic setup: