Reka UI logoReka
backdrop
Examples
Components

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Make changes to your account here. Click save when you're done.

Features

  • Can be controlled or uncontrolled.
  • Supports horizontal/vertical orientation.
  • Supports automatic/manual activation.
  • Full keyboard navigation.

Installation

Install the component from your command line.

sh
$ npm add reka-ui

Anatomy

Import all parts and piece them together.

vue
<script setup>
import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
</script>

<template>
  <TabsRoot>
    <TabsList>
      <TabsIndicator />
      <TabsTrigger />
    </TabsList>
    <TabsContent />
  </TabsRoot>
</template>

API Reference

Root

Contains all the tabs component parts.

Data AttributeValue
[data-orientation]"vertical" | "horizontal"

List

Contains the triggers that are aligned along the edge of the active content.

Data AttributeValue
[data-orientation]"vertical" | "horizontal"

Trigger

The button that activates its associated content.

Data AttributeValue
[data-state]"active" | "inactive"
[data-disabled]Present when disabled
[data-orientation]"vertical" | "horizontal"

Indicator

The indicator that highlights the current active tab.

CSS VariableDescription
--reka-tabs-indicator-size
The size of the indicator.
--reka-tabs-indicator-position
The position of the indicator

Content

Contains the content associated with each trigger.

tip
Built with Presence component - supports any animation techniques while maintaining access to presence emitted events.
Data AttributeValue
[data-state]"active" | "inactive"
[data-orientation]"vertical" | "horizontal"

Examples

Vertical

You can create vertical tabs by using the orientation prop.

vue
<script setup>
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
</script>

<template>
  <TabsRoot
    default-value="tab1"
    orientation="vertical"
  >
    <TabsList aria-label="tabs example">
      <TabsTrigger value="tab1">
        One
      </TabsTrigger>
      <TabsTrigger value="tab2">
        Two
      </TabsTrigger>
      <TabsTrigger value="tab3">
        Three
      </TabsTrigger>
    </TabsList>
    <TabsContent value="tab1">
      Tab one content
    </TabsContent>
    <TabsContent value="tab2">
      Tab two content
    </TabsContent>
    <TabsContent value="tab3">
      Tab three content
    </TabsContent>
  </TabsRoot>
</template>

Accessibility

Adheres to the Tabs WAI-ARIA design pattern.

Keyboard Interactions

KeyDescription
Tab
When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
ArrowDown
Moves focus to the next trigger depending on orientation and activates its associated content.
ArrowRight
Moves focus to the next trigger depending on orientation and activates its associated content.
ArrowUp
Moves focus to the previous trigger depending on orientation and activates its associated content.
ArrowLeft
Moves focus to the previous trigger depending on orientation and activates its associated content.
Home
Moves focus to the first trigger and activates its associated content.
End
Moves focus to the last trigger and activates its associated content.