Hire Us Get CoreUI PRO all-access →

Vue Tabs Components

Tabs

Markdown ChatGPT Claude

The CoreUI Vue Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.

Available in Other JavaScript Frameworks

CoreUI Vue Tabs Components is also available for Angular and React. Explore framework-specific implementations below:

On this page

Example

The basic Vue tabs example uses the variant="tabs" props to generate a tabbed interface.

vue 
<template>
  <CTabs activeItemKey="profile">
    <CTabList variant="tabs">
      <CTab itemKey="home">Home</CTab>
      <CTab itemKey="profile">Profile</CTab>
      <CTab itemKey="contact">Contact</CTab>
      <CTab disabled itemKey="disabled">Disabled</CTab>
    </CTabList>
    <CTabContent>
      <CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
      <CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
      <CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
      <CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
    </CTabContent>
  </CTabs>
</template>

<script setup>
import { CTabs, CTabList, CTab, CTabContent, CTabPanel } from '@coreui/vue'
</script>

Available styles

Change the style of <CTabs>’s component with modifiers and utilities. Mix and match as needed, or build your own.

Unstyled

If you don’t provide the variant prop, the component will default to a basic style.

vue 
<template>
  <CTabs activeItemKey="profile">
    <CTabList>
      <CTab itemKey="home">Home</CTab>
      <CTab itemKey="profile">Profile</CTab>
      <CTab itemKey="contact">Contact</CTab>
      <CTab disabled itemKey="disabled">Disabled</CTab>
    </CTabList>
    <CTabContent>
      <CTabPanel class="p-3" itemKey="home"> Home tab content </CTabPanel>
      <CTabPanel class="p-3" itemKey="profile"> Profile tab content </CTabPanel>
      <CTabPanel class="p-3" itemKey="contact"> Contact tab content </CTabPanel>
      <CTabPanel class="p-3" itemKey="disabled"> Disabled tab content </CTabPanel>
    </CTabContent>
  </CTabs>
</template>

<script setup>
import { CTabs, CTabList, CTab, CTabContent, CTabPanel } from '@coreui/vue'
</script>

Pills

Take that same code, but use variant="pills" instead:

vue 
<template>
  <CTabs :activeItemKey="2">
    <CTabList variant="pills">
      <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
      <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
      <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
      <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
    </CTabList>
    <CTabContent>
      <CTabPanel class="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
        Home tab content
      </CTabPanel>
      <CTabPanel class="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
        Profile tab content
      </CTabPanel>
      <CTabPanel class="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
        Contact tab content
      </CTabPanel>
      <CTabPanel class="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
        Disabled tab content
      </CTabPanel>
    </CTabContent>
  </CTabs>
</template>

<script setup>
import { CTabs, CTabList, CTab, CTabContent, CTabPanel } from '@coreui/vue'
</script>

Underline

Take that same code, but use variant="underline" instead:

vue 
<template>
  <CTabs :activeItemKey="2">
    <CTabList variant="underline">
      <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
      <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
      <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
      <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
    </CTabList>
    <CTabContent>
      <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
        Home tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
        Profile tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
        Contact tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
        Disabled tab content
      </CTabPanel>
    </CTabContent>
  </CTabs>
</template>

<script setup>
import { CTabs, CTabList, CTab, CTabContent, CTabPanel } from '@coreui/vue'
</script>

Underline border

Take that same code, but use variant="underline-border" instead:

vue 
<template>
  <CTabs :activeItemKey="2">
    <CTabList variant="underline-border">
      <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
      <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
      <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
      <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
    </CTabList>
    <CTabContent>
      <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
        Home tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
        Profile tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
        Contact tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
        Disabled tab content
      </CTabPanel>
    </CTabContent>
  </CTabs>
</template>

<script setup>
import { CTabs, CTabList, CTab, CTabContent, CTabPanel } from '@coreui/vue'
</script>

Enclosed

Use the variant="enclosed" class to give your tab items a subtle border and rounded styling.

vue 
<template>
  <CTabs :activeItemKey="1">
    <CTabList variant="enclosed">
      <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
      <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
      <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
      <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
    </CTabList>
    <CTabContent>
      <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
        Home tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
        Profile tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
        Contact tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
        Disabled tab content
      </CTabPanel>
    </CTabContent>
  </CTabs>
</template>

<script setup>
import { CTabs, CTabList, CTab, CTabContent, CTabPanel } from '@coreui/vue'
</script>

Enclosed pills

Use the variant="enclosed-pills" to achieve a pill-style appearance for each tab item, using pill-shaped borders and smoother outlines.

vue 
<template>
  <CTabs :activeItemKey="1">
    <CTabList variant="enclosed-pills">
      <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
      <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
      <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
      <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
    </CTabList>
    <CTabContent>
      <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
        Home tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
        Profile tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
        Contact tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
        Disabled tab content
      </CTabPanel>
    </CTabContent>
  </CTabs>
</template>

<script setup>
import { CTabs, CTabList, CTab, CTabContent, CTabPanel } from '@coreui/vue'
</script>

Fill and justify

Force your <CTabs>’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use layout="fill". Notice that all horizontal space is occupied, but not every nav item has the same width.

vue 
<template>
  <CTabs :activeItemKey="2">
    <CTabList variant="tabs" layout="fill">
      <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
      <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile tab with longer content</CTab>
      <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
      <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
    </CTabList>
    <CTabContent>
      <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
        Home tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
        Profile tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
        Contact tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
        Disabled tab content
      </CTabPanel>
    </CTabContent>
  </CTabs>
</template>

<script setup>
import { CTabs, CTabList, CTab, CTabContent, CTabPanel } from '@coreui/vue'
</script>

For equal-width elements, use layout="justified". All horizontal space will be occupied by nav links, but unlike the layout="fill" above, every nav item will be the same width.

vue 
<template>
  <CTabs :activeItemKey="2">
    <CTabList variant="tabs" layout="justified">
      <CTab aria-controls="home-tab-pane" :itemKey="1">Home</CTab>
      <CTab aria-controls="profile-tab-pane" :itemKey="2">Profile</CTab>
      <CTab aria-controls="contact-tab-pane" :itemKey="3">Contact</CTab>
      <CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
    </CTabList>
    <CTabContent>
      <CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
        Home tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
        Profile tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
        Contact tab content
      </CTabPanel>
      <CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
        Disabled tab content
      </CTabPanel>
    </CTabContent>
  </CTabs>
</template>

<script setup>
import { CTabs, CTabList, CTab, CTabContent, CTabPanel } from '@coreui/vue'
</script>