Skip to content
On this page
You're viewing the docs for the main branch of Codex, which may contain features that have not been released yet. Codex users should visit the official docs.


A layout for navigating between sections of content.

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


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.

Reading direction

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

Reading direction

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



Prop nameDescriptionTypeDefault
active(required)The name of the currently active Tab in the layout.

Provided by v-model:active binding in the parent component.
framedWhether or not the component should be displayed in a framed visual style.booleanfalse


Method nameDescriptionSignature
selectProgrammatically select a tab based on its "name" propParams:
  • tabName string - The name of the tab to select
Returns: void
nextSet the next tab to active, if one existsReturns: void
prevSet the previous tab to active, if one existsReturns: void


Event namePropertiesDescription
update:activeactive string - The name of the current active tabEmitted whenever the active tab changes


defaultOne or more Tab components must be provided here