Skip to content
On this page


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

CSS-only version

Markup structure

This no-JS implementation of Tabs requires some logic on the server side to set the current tab:

  • On the back end, look for a URL query param indicating the current tab. If there isn't one, choose a default tab.
  • In the markup or template, set aria-selected attributes on the tab list items and aria-hidden on the tab sections based on the current tab. Codex styles will be applied according to these ARIA attributes.
  • Add an aria-activedescendant attribute to the tabs list <ul> that equals the ID of the current tab
  • Each tab list item contains a hidden form and submit input. When clicked, it will apply the specified URL query param, reload the page, and show the new tab.

To disable a tab:

  • Add the disabled attribute to that tab's submit input


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