Tab

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

Guidelines

When to use 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.

Component limitations

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:

Quiet tabs: They are used on white non-boxed backgrounds.

Framed tabs: They are used within boxes or modules.

 

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.

Do:

• Use Tabs to navigate between various sections of related content.

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.

Do:

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

Don't:

• Mix verbs and nouns for the labels. Consistent & Clear

Demos

Configurable example

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

Content for first tab

Content for second tab

NPM

<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>

MediaWiki

<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' );

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>

Name	Value
Props
disabled
tabName
label
Slots
default
View
Reading direction	Left to right (LTR) Right to left (RTL)

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.

Must be used with Tabs component

This component is only meant to be used inside the default <slot> of the <Tabs> component. It cannot be used as a standalone component. See the Tabs documentation for more information.

Props

Prop name	Description	Type	Default
name(required)	String name of the tab, used for programmatic selection. Each Tab inside a layout must have a unique name. This prop will also be used as the tab label if no "label" prop is provided.	string
label	Label that corresponds to this Tab in the Tabs component's header. Lengthy labels will be truncated.	string	''
disabled	Whether or not the tab is disabled. Disabled tabs cannot be accessed via label clicks or keyboard navigation.	boolean	false

Slots

Name	Description	Bindings
default	Tab content

CSS-only version

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