directus/docs/reference/app/components/v-tabs.md

Tabs

Tabs work like tabs in the browser and are there to split data into quickly accessable pages.

<v-tabs v-model="activePage">
	<v-tab>Tab 1</v-tab>
	<v-tab>Tab 2</v-tab>
	<v-tab>Tab 3</v-tab>
</v-tabs>

With Tab Items

To be able to display a page depending on the tab use tab items.

<v-tabs v-model="activePage">
	<v-tab>Tab 1</v-tab>
	<v-tab>Tab 2</v-tab>
	<v-tab>Tab 3</v-tab>
</v-tabs>

<v-tabs-items v-model="activePage">
	<v-tab-item>
		<h1>This is the first page</h1>
	</v-tab-item>
	<v-tab-item>
		<h1>This is the second page</h1>
	</v-tab-item>
	<v-tab-item>
		<h1>This is the third page</h1>
	</v-tab-item>
</v-tabs-items>

Reference

Props

Prop	Description	Default	Type
value	The currently selected tab	undefined	(string or number)[]
vertical	Display the tabs in a vertical format	false	Boolean

CSS Variables

Variable	Default
--v-tabs-underline-color	var(--foreground-normal)

Events

Event	Description	Value
input	Used to update the selected tab

Slots

Slot	Description	Data
default