v4.0.0-beta.4

Search docs...

Ctrl K

Tabs

<BaseTabs /> · A subnavigation component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times. ...

vue

<template>
  <BaseTabs
    default-value="team"
    variant="primary"
    :tabs="[
      { label: 'Team', value: 'team' },
      { label: 'Projects', value: 'projects' },
      { label: 'Disabled', value: 'tasks', disabled: true },
    ]"
  >
    <BaseTabsContent value="team">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid
      iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum?
      Ne discipulum abducam, times. ...
    </BaseTabsContent>
    <BaseTabsContent value="projects">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada odio sed ante malesuada,
      quis facilisis erat iaculis. Sed egestas porta fringilla. Ut ultrices, elit eget congue aliquet,
      risus sem semper lorem, vitae efficitur nunc est eget mi. ...
    </BaseTabsContent>
    <BaseTabsContent value="tasks">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo ipsum, efficitur eu finibus eu,
      gravida quis enim. Fusce a elementum nunc. Nunc venenatis a elit quis ornare.
      Pellentesque quis vehicula ipsum. ...
    </BaseTabsContent>
  </BaseTabs>
</template>

Features

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

Anatomy

Use the <BaseTabs /> component to create a subnavigation component. Nest <BaseTabsContent /> components inside <BaseTabs /> to create the content for each tab.

vue

<template>
  <BaseTabs>
    <BaseTabsContent>
      <!-- Content goes here -->
    </BaseTabsContent>
    <BaseTabsContent>
      <!-- Content goes here -->
    </BaseTabsContent>
  </BaseTabs>
</template>

API Reference

This component has props that you can use to modify its visual style.

Tabs

Model	Type
`model-value`	`StringOrNumber` The controlled value of the tab to activate. Can be bind as `v-model`.

Prop	Type
`tabs` default:`-`	`BaseTabsTriggerProps[]` An array of tab objects that contain a label and value
`label` default:`-`	`string` Accessible label for the tabs
`variant` default:`"primary"`	`"primary" \| "dark" \| "muted"` Defines the color of the active tab
`justify` default:`"start"`	`"start" \| "center" \| "end"` The horizontal alignment of the tabs.
`rounded` default:`"md"`	`"none" \| "sm" \| "md" \| "lg" \| "full"` The radius of the boxed tab.
`type` default:`"tabs"`	`"tabs" \| "box"` The type of tabs to display..
`default-value` default:`-`	`StringOrNumber` The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
`orientation` default:`-`	`DataOrientation` The orientation the tabs are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down)
`dir` default:`-`	`Direction` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`activation-mode` default:`-`	`"automatic" \| "manual"` Whether a tab is activated automatically (on focus) or manually (on click).
`unmount-on-hide` default:`-`	`boolean` When `true`, the element will be unmounted on closed state.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Type
`#default`	`any`
`#trigger`	`any`

Tab item

Prop	Type
`value` default:`-`	`StringOrNumber` A unique value that associates the content with a trigger.
`force-mount` default:`-`	`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Type
`#default`	`any`

Examples

Alignment

Use the justify prop to change alignment of the tabs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times. ...

vue

<template>
  <BaseTabs
    default-value="team"
    justify="center"
    variant="primary"
    :tabs="[
      { label: 'Team', value: 'team' },
      { label: 'Projects', value: 'projects' },
    ]"
  >
    <BaseTabsContent value="team">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid
      iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum?
      Ne discipulum abducam, times. ...
    </BaseTabsContent>
    <BaseTabsContent value="projects">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada odio sed ante malesuada,
      quis facilisis erat iaculis. Sed egestas porta fringilla. Ut ultrices, elit eget congue aliquet,
      risus sem semper lorem, vitae efficitur nunc est eget mi. ...
    </BaseTabsContent>
    <BaseTabsContent value="tasks">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo ipsum, efficitur eu finibus eu,
      gravida quis enim. Fusce a elementum nunc. Nunc venenatis a elit quis ornare.
      Pellentesque quis vehicula ipsum. ...
    </BaseTabsContent>
  </BaseTabs>
</template>

Orientation

Use the orientation prop to change orientation of the tabs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times. ...

vue

<template>
  <BaseTabs
    default-value="team"
    orientation="vertical"
    :tabs="[
      { label: 'Team', value: 'team' },
      { label: 'Projects', value: 'projects' },
      { label: 'Disabled', value: 'tasks', disabled: true },
    ]"
  >
    <BaseTabsContent value="team">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid
      iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum?
      Ne discipulum abducam, times. ...
    </BaseTabsContent>
    <BaseTabsContent value="projects">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada odio sed ante malesuada,
      quis facilisis erat iaculis. Sed egestas porta fringilla. Ut ultrices, elit eget congue aliquet,
      risus sem semper lorem, vitae efficitur nunc est eget mi. ...
    </BaseTabsContent>
    <BaseTabsContent value="tasks">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo ipsum, efficitur eu finibus eu,
      gravida quis enim. Fusce a elementum nunc. Nunc venenatis a elit quis ornare.
      Pellentesque quis vehicula ipsum. ...
    </BaseTabsContent>
  </BaseTabs>
</template>

Variants

Use the variant prop to change the color of the tabs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times. ...

vue

<template>
  <BaseTabs
    default-value="team"
    variant="primary"
    :tabs="[
      { label: 'Team', value: 'team' },
      { label: 'Projects', value: 'projects' },
      { label: 'Disabled', value: 'tasks', disabled: true },
    ]"
  >
    <BaseTabsContent value="team">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid
      iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum?
      Ne discipulum abducam, times. ...
    </BaseTabsContent>
    <BaseTabsContent value="projects">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada odio sed ante malesuada,
      quis facilisis erat iaculis. Sed egestas porta fringilla. Ut ultrices, elit eget congue aliquet,
      risus sem semper lorem, vitae efficitur nunc est eget mi. ...
    </BaseTabsContent>
    <BaseTabsContent value="tasks">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo ipsum, efficitur eu finibus eu,
      gravida quis enim. Fusce a elementum nunc. Nunc venenatis a elit quis ornare.
      Pellentesque quis vehicula ipsum. ...
    </BaseTabsContent>
  </BaseTabs>
</template>

Icons

Include icons in the tabs object to display icons.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times. ...

vue

<template>
  <BaseTabs
    default-value="tasks"
    color="default"
    :tabs
  >
    <BaseTabsContent value="team">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid
      iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum?
      Ne discipulum abducam, times. ...
    </BaseTabsContent>
    <BaseTabsContent value="projects">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada odio sed ante malesuada,
      quis facilisis erat iaculis. Sed egestas porta fringilla. Ut ultrices, elit eget congue aliquet,
      risus sem semper lorem, vitae efficitur nunc est eget mi. ...
    </BaseTabsContent>
    <BaseTabsContent value="tasks">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo ipsum, efficitur eu finibus eu,
      gravida quis enim. Fusce a elementum nunc. Nunc venenatis a elit quis ornare.
      Pellentesque quis vehicula ipsum. ...
    </BaseTabsContent>
  </BaseTabs>
</template>

<script setup lang="ts">
const tabs = [
  {
    label: 'Team',
    value: 'team',
    icon: 'solar:users-group-rounded-linear',
  },
  {
    label: 'Projects',
    value: 'projects',
    icon: 'solar:case-linear',
  },
  {
    label: 'Tasks',
    value: 'tasks',
    icon: 'solar:scanner-2-linear',
  },
]
</script>

Boxed

Use the type prop to change the style of the tabs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times. ...

vue

<template>
  <BaseTabs
    v-model="selectedTab"
    type="box"
    :tabs="tabs"
  >
    <BaseTabsContent value="team">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid
      iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum?
      Ne discipulum abducam, times. ...
    </BaseTabsContent>
    <BaseTabsContent value="projects">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada odio sed ante malesuada,
      quis facilisis erat iaculis. Sed egestas porta fringilla. Ut ultrices, elit eget congue aliquet,
      risus sem semper lorem, vitae efficitur nunc est eget mi. ...
    </BaseTabsContent>
    <BaseTabsContent value="tasks">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo ipsum, efficitur eu finibus eu,
      gravida quis enim. Fusce a elementum nunc. Nunc venenatis a elit quis ornare.
      Pellentesque quis vehicula ipsum. ...
    </BaseTabsContent>
  </BaseTabs>
</template>

<script setup lang="ts">
const selectedTab = ref('team')

const tabs = [
  {
    label: 'Team',
    value: 'team',
  },
  {
    label: 'Projects',
    value: 'projects',
  },
  {
    label: 'Tasks',
    value: 'tasks',
  },
]
</script>

Boxed Icons

Include icons in the tabs object to display icons.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times. ...

vue

<template>
  <BaseTabs
    v-model="selectedTab"
    type="box"
    variant="dark"
  >
    <template #trigger>
      <BaseTabsTrigger v-for="tab in tabs" :key="tab.value" label="Team" :icon="tab.icon" value="team" @click="selectedTab = tab.value" />
    </template>

    <BaseTabsContent value="team">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid
      iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum?
      Ne discipulum abducam, times. ...
    </BaseTabsContent>
    <BaseTabsContent value="projects">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada odio sed ante malesuada,
      quis facilisis erat iaculis. Sed egestas porta fringilla. Ut ultrices, elit eget congue aliquet,
      risus sem semper lorem, vitae efficitur nunc est eget mi. ...
    </BaseTabsContent>
    <BaseTabsContent value="tasks">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo ipsum, efficitur eu finibus eu,
      gravida quis enim. Fusce a elementum nunc. Nunc venenatis a elit quis ornare.
      Pellentesque quis vehicula ipsum. ...
    </BaseTabsContent>
  </BaseTabs>
</template>

<script setup lang="ts">
const selectedTab = ref('team')

const tabs = [
  {
    label: 'Team',
    value: 'team',
    icon: 'solar:users-group-rounded-linear',
  },
  {
    label: 'Projects',
    value: 'projects',
    icon: 'solar:case-linear',
  },
  {
    label: 'Tasks',
    value: 'tasks',
    icon: 'solar:scanner-2-linear',
  },
]
</script>

Nested tabs

You can nest tabs within tabs.

team Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times. ...

vue

<template>
  <BaseTabs
    default-value="team"
    variant="dark"
    :tabs="tabs"
  >
    <BaseTabsContent value="team">
      <BaseTabs
        default-value="team"
        orientation="vertical"
        type="box"
        variant="dark"
        :tabs="tabsNoIcon"
      >
        <BaseTabsContent value="team">
          team Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid
          iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum?
          Ne discipulum abducam, times. ...
        </BaseTabsContent>
        <BaseTabsContent value="projects">
          team Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada odio sed ante malesuada,
          quis facilisis erat iaculis. Sed egestas porta fringilla. Ut ultrices, elit eget congue aliquet,
          risus sem semper lorem, vitae efficitur nunc est eget mi. ...
        </BaseTabsContent>
        <BaseTabsContent value="tasks">
          team Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo ipsum, efficitur eu finibus eu,
          gravida quis enim. Fusce a elementum nunc. Nunc venenatis a elit quis ornare.
          Pellentesque quis vehicula ipsum. ...
        </BaseTabsContent>
      </BaseTabs>
    </BaseTabsContent>
    <BaseTabsContent value="projects">
      <BaseTabs
        default-value="team"
        orientation="vertical"
        type="box"
        variant="dark"
        :tabs="tabsNoIcon"
      >
        <BaseTabsContent value="team">
          projects Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid
          iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum?
          Ne discipulum abducam, times. ...
        </BaseTabsContent>
        <BaseTabsContent value="projects">
          projects Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada odio sed ante malesuada,
          quis facilisis erat iaculis. Sed egestas porta fringilla. Ut ultrices, elit eget congue aliquet,
          risus sem semper lorem, vitae efficitur nunc est eget mi. ...
        </BaseTabsContent>
        <BaseTabsContent value="tasks">
          projects Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo ipsum, efficitur eu finibus eu,
          gravida quis enim. Fusce a elementum nunc. Nunc venenatis a elit quis ornare.
          Pellentesque quis vehicula ipsum. ...
        </BaseTabsContent>
      </BaseTabs>
    </BaseTabsContent>
    <BaseTabsContent value="tasks">
      <BaseTabs
        default-value="team"
        orientation="vertical"
        type="box"
        variant="dark"
        :tabs="tabsNoIcon"
      >
        <BaseTabsContent value="team">
          tasks Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid
          iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum?
          Ne discipulum abducam, times. ...
        </BaseTabsContent>
        <BaseTabsContent value="projects">
          tasks Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada odio sed ante malesuada,
          quis facilisis erat iaculis. Sed egestas porta fringilla. Ut ultrices, elit eget congue aliquet,
          risus sem semper lorem, vitae efficitur nunc est eget mi. ...
        </BaseTabsContent>
        <BaseTabsContent value="tasks">
          tasks Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris leo ipsum, efficitur eu finibus eu,
          gravida quis enim. Fusce a elementum nunc. Nunc venenatis a elit quis ornare.
          Pellentesque quis vehicula ipsum. ...
        </BaseTabsContent>
      </BaseTabs>
    </BaseTabsContent>
  </BaseTabs>
</template>

<script setup lang="ts">
const tabs = [
  {
    label: 'Team',
    value: 'team',
    icon: 'solar:users-group-rounded-linear',
  },
  {
    label: 'Projects',
    value: 'projects',
    icon: 'solar:case-linear',
  },
  {
    label: 'Tasks',
    value: 'tasks',
    icon: 'solar:scanner-2-linear',
  },
]

const tabsNoIcon = [
  {
    label: 'Team',
    value: 'team',
  },
  {
    label: 'Projects',
    value: 'projects',
  },
  {
    label: 'Tasks',
    value: 'tasks',
  },
]
</script>

Switch Thin

Tag

Edit this page on Github

Tabs

Features

Anatomy

API Reference

Tabs

Tab item

Examples

Alignment

Orientation

Variants

Icons

Boxed

Boxed Icons

Nested tabs

On This Page