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.

View source for Sand cat

 The '''sand cat''' (''Felis margarita''), also known as the '''sand dune cat''', is a small wild [[Felis|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.

Name	Value
Props
framed
View
Reading direction	Left to right (LTR) Right to left (RTL)

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

Name	Value
Props
framed
View
Reading direction	Left to right (LTR) Right to left (RTL)

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 name	Description	Type	Default
`active`^(required)	The `name` of the currently active Tab in the layout. Provided by `v-model:active` binding in the parent component.	`string`
`framed`	Whether or not the component should be displayed in a framed visual style.	`boolean`	`false`

Methods

Method name	Description	Signature
`select`	Programmatically select a tab based on its "name" prop	Params: tabName `string` - The name of the tab to select Returns: `void`
`next`	Set the next tab to active, if one exists	Returns: `void`
`prev`	Set the previous tab to active, if one exists	Returns: `void`

Events

Event name	Properties	Description
`update:active`	active `string` - The `name` of the current active tab	Emitted whenever the active tab changes

Slots

Name	Description	Bindings
default	One 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

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.

html

<!-- Wrapper div. -->
<div class="cdx-tabs">
  <!-- Header with tab list. -->
  <div class="cdx-tabs__header">
    <!-- List of tabs. -->
    <ul
      class="cdx-tabs__list"
      role="tablist"
      :aria-activedescendant="currentCssTabId"
    >
      <!-- Tab list item. -->
      <li id="form-tabs-1-label" class="cdx-tabs__list__item">
        <!-- Form with a hidden input. When the tab is clicked, the input will submit
				the form and add the tab name as a URL query param. -->
        <form method="get" :action="url">
          <!-- Submit input, which will be visually hidden via CSS. -->
          <input
            id="form-tabs-1-input"
            class="cdx-tabs__submit"
            type="submit"
            name="tab"
            value="form-tabs-1"
          />
          <!-- Label with tab name. -->
          <label
            for="form-tabs-1-input"
            role="tab"
            :aria-selected="currentCssTabId === 'form-tabs-1'"
          >
            Tab number one
          </label>
        </form>
      </li>
      <li id="form-tabs-2-label" class="cdx-tabs__list__item" role="tab">
        <form method="get" :action="url">
          <input
            id="form-tabs-2-input"
            class="cdx-tabs__submit"
            type="submit"
            name="tab"
            value="form-tabs-2"
          />
          <label
            for="form-tabs-2-input"
            role="tab"
            :aria-selected="currentCssTabId === 'form-tabs-2'"
          >
            Tab number two with a longer label
          </label>
        </form>
      </li>
      <!-- Disabled tab's list item has the `cdx-tabs__list__item--disabled` class. -->
      <li
        id="form-tabs-3-label"
        class="cdx-tabs__list__item cdx-tabs__list__item--disabled"
        role="tab"
      >
        <form method="get" :action="url">
          <!-- `disabled` attribute means this tab cannot be selected. -->
          <input
            id="form-tabs-3-input"
            class="cdx-tabs__submit"
            type="submit"
            name="tab"
            value="form-tabs-3"
            disabled
          />
          <label
            for="form-tabs-3-input"
            role="tab"
            :aria-selected="currentCssTabId === 'form-tabs-3'"
          >
            Tab number three
          </label>
        </form>
      </li>
      <li id="form-tabs-4-label" class="cdx-tabs__list__item" role="tab">
        <form method="get" :action="url">
          <input
            id="form-tabs-4-input"
            class="cdx-tabs__submit"
            type="submit"
            name="tab"
            value="form-tabs-4"
          />
          <label
            for="form-tabs-4-input"
            role="tab"
            :aria-selected="currentCssTabId === 'form-tabs-4'"
          >
            Tab number four
          </label>
        </form>
      </li>
    </ul>
  </div>
  <!-- Tabs. -->
  <div class="cdx-tabs__content">
    <!-- <section> element for each tab, with any content inside. -->
    <section
      id="form-tabs-1"
      :aria-hidden="currentCssTabId !== 'form-tabs-1'"
      aria-labelledby="form-tabs-1-label"
      class="cdx-tab"
      role="tabpanel"
      tabindex="-1"
    >
      Tab 1 content
    </section>
    <section
      id="form-tabs-2"
      :aria-hidden="currentCssTabId !== 'form-tabs-2'"
      aria-labelledby="form-tabs-2-label"
      class="cdx-tab"
      role="tabpanel"
      tabindex="-1"
    >
      Tab 2 content
    </section>
    <section
      id="form-tabs-3"
      :aria-hidden="currentCssTabId !== 'form-tabs-3'"
      aria-labelledby="form-tabs-3-label"
      class="cdx-tab"
      role="tabpanel"
      tabindex="-1"
    >
      Tab 3 content
    </section>
    <section
      id="form-tabs-4"
      :aria-hidden="currentCssTabId !== 'form-tabs-4'"
      aria-labelledby="form-tabs-4-label"
      class="cdx-tab"
      role="tabpanel"
      tabindex="-1"
    >
      Tab 4 content
    </section>
  </div>
</div>

// Note: we're doing this in our client-side JS, but it should be done on the
// back-end.
import { onMounted } from "vue";
const url = ref("");
const currentCssTabId = ref("");
onMounted(() => {
  // Grab the page URL so it can be used in the CSS-only Tabs markup.
  url.value = window.location.href;
  // Look for a URL query param called 'tab'. If it doesn't exist, default to
  // the first tab. The currentCssTabId will be used in the CSS-only Tabs
  // markup to highlight the active tab and display the proper tab content.
  const searchParams = new URLSearchParams(window.location.search);
  currentCssTabId.value = searchParams.get("tab") || "form-tabs-1";
});

Tabs

Demos

Basic Example

Sand cat

View source for Sand cat

Sand cat: Revision history

Revisions

Header row scroll

Content for tab1

Content for tab2

Content for tab3

Content for tab4

Content for tab5

Content for tab6

Dynamic replacement of slot content

Content for tab1

Content for tab2

Content for tab3

Usage

Props

Methods

Events

Slots

CSS-only version

Markup structure

Tabs ​

Demos ​

Basic Example ​

Sand cat

Header row scroll ​

Content for tab1

Dynamic replacement of slot content ​

Content for tab1

Usage ​

Props ​

Methods ​

Events ​

Slots ​

CSS-only version ​

Markup structure ​

Tabs

Demos

Basic Example

Header row scroll

Dynamic replacement of slot content

Usage

Props

Methods

Events

Slots

CSS-only version

Markup structure