Codex
On this page

Tabs ​

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.

Demos ​

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.

NameValue
Props 
framed
View 
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

NameValue
Props 
framed
View 
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

Usage ​

Props ​

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

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

Methods ​

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

Events ​

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

Slots ​

NameDescriptionBindings
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 <input>
  • Add the aria-disabled="true" attribute to that tab's <label>

The tabs below have long labels, making the tab list too long for its container. When this happens, you can horizontally scroll to reach the rest of the tabs list.

WARNING

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