Tab ​

A Tab is one of the selectable items included within Tabs.

Guidelines ​

Using tab items ​

Two or more tab items are grouped to create a Tabs component. Tab items cannot be used individually. For example, different tab items can represent the different sections of an article. A tab includes a label, which displays in the tabs list, and its associated content.

Specifications ​

Each tab item may include the following elements:

1. Text
   Currently, tab items solely consist of text elements within the tab, without the inclusion of icons or visual indicators.
2. Selected indicator
   Both quiet and framed tabs feature a visual indicator when selected. In the case of quiet tabs, this indicator is a blue line positioned below the tab text, which is also colored blue. In contrast, framed tabs use a white background behind the tab text to indicate their selected state.

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

Refer to the Tabs component with Tab items in Codex Figma

Types ​

As documented in Tabs, there are two different type of tab items depending on the tabs' style and where they are employed:

Interaction states ​

Both quiet and framed tab items have the following visually separate states:

Quiet tab item.

Framed tab item.

1. Default (unselected)
2. Hover
3. Active
4. Selected
5. Focus
6. Disabled

Best practices ​

Consider the following recommendations when using Tabs.

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.

Demos ​

Configurable example ​

The demo below allows for configuration of name, label, and disabled props, as well as slot content.

<template>
	<cdx-tabs v-model:active="currentTab">
		<cdx-tab
			:name="tabName"
			:disabled="disabled"
			:label="label"
		>
			<p>
				<slot />
			</p>
		</cdx-tab>

		<cdx-tab name="tab2">
			<p>
				Content for second tab
			</p>
		</cdx-tab>
	</cdx-tabs>
</template>

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

export default defineComponent( {
	name: 'ConfigurableTabDemo',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		tabName: {
			type: String,
			required: true
		},

		disabled: {
			type: Boolean,
			default: false
		},

		label: {
			type: String,
			default: ''
		}
	},

	data() {
		return {
			currentTab: ''
		};
	},

	watch: {
		tabName( newVal, oldVal ) {
			if ( this.currentTab === oldVal ) {
				this.currentTab = newVal;
			}
		}
	},

	mounted() {
		this.currentTab = this.tabName;
	}
} );
</script>

<template>
	<cdx-tabs v-model:active="currentTab">
		<cdx-tab
			:name="tabName"
			:disabled="disabled"
			:label="label"
		>
			<p>
				<slot></slot>
			</p>
		</cdx-tab>

		<cdx-tab name="tab2">
			<p>
				Content for second tab
			</p>
		</cdx-tab>
	</cdx-tabs>
</template>

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

// @vue/component
module.exports = defineComponent( {
	name: 'ConfigurableTabDemo',
	components: {
		CdxTabs,
		CdxTab
	},
	props: {
		tabName: {
			type: String,
			required: true
		},

		disabled: {
			type: Boolean,
			default: false
		},

		label: {
			type: String,
			default: ''
		}
	},

	data() {
		return {
			currentTab: ''
		};
	},

	watch: {
		tabName( newVal, oldVal ) {
			if ( this.currentTab === oldVal ) {
				this.currentTab = newVal;
			}
		}
	},

	mounted() {
		this.currentTab = this.tabName;
	}
} );
</script>

disabled

tabName

label

default

Reading direction

Vue usage ​

This component can display arbitrary content, including markup, via its default slot. The provided content is wrapped in a <section> tag and given an HTML ID.

Props ​

Slots ​

CSS-only version ​

See the Tabs page to learn how to build a CSS-only tabbed layout.