Skip to content

Vue Tabs - Flowbite

Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container


The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.

Prop - variant (default)

typescript
export type TabsVariant = 'default' | 'underline' | 'pills'

defineProps({
    variant: {
        type: String as PropType<TabsVariant>,
        default: 'default',
    },
})
export type TabsVariant = 'default' | 'underline' | 'pills'

defineProps({
    variant: {
        type: String as PropType<TabsVariant>,
        default: 'default',
    },
})
  • First
  • Second
  • Third
  • Fourth
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, id, nisi? Enim excepturi id minus molestias quaerat qui rem repudiandae sed tempore ullam voluptate, voluptatum. Consequuntur illum possimus tempora totam.
vue
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
  <tabs v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
    <tab name="first" title="First">
      Lorem...
    </tab>
    <tab name="second" title="Second">
      Lorem...
    </tab>
    <tab name="third" title="Third">
      Lorem...
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Lorem...
    </tab>
  </tabs>
</template>
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
  <tabs v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
    <tab name="first" title="First">
      Lorem...
    </tab>
    <tab name="second" title="Second">
      Lorem...
    </tab>
    <tab name="third" title="Third">
      Lorem...
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Lorem...
    </tab>
  </tabs>
</template>

Prop - variant (underline)

  • First
  • Second
  • Third
  • Fourth
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
vue
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
  <tabs variant="underline" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
    <tab name="first" title="First">
      Lorem...
    </tab>
    <tab name="second" title="Second">
      Lorem...
    </tab>
    <tab name="third" title="Third">
      Lorem...
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Lorem...
    </tab>
  </tabs>
</template>
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
  <tabs variant="underline" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
    <tab name="first" title="First">
      Lorem...
    </tab>
    <tab name="second" title="Second">
      Lorem...
    </tab>
    <tab name="third" title="Third">
      Lorem...
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Lorem...
    </tab>
  </tabs>
</template>

Prop - variant (pills)

  • First
  • Second
  • Third
  • Fourth
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
vue
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
  <tabs variant="pills" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
    <tab name="first" title="First">
      Lorem...
    </tab>
    <tab name="second" title="Second">
      Lorem...
    </tab>
    <tab name="third" title="Third">
      Lorem...
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Lorem...
    </tab>
  </tabs>
</template>
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
  <tabs variant="pills" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
    <tab name="first" title="First">
      Lorem...
    </tab>
    <tab name="second" title="Second">
      Lorem...
    </tab>
    <tab name="third" title="Third">
      Lorem...
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Lorem...
    </tab>
  </tabs>
</template>

Prop - directive

Use this props if you want to control which directive to use for rendering every tab content

typescript
export type TabsVariant = 'default' | 'underline' | 'pills'

defineProps({
    directive: {
        type: String as PropType<'if' | 'show'>,
        default: 'if',
    },
})
export type TabsVariant = 'default' | 'underline' | 'pills'

defineProps({
    directive: {
        type: String as PropType<'if' | 'show'>,
        default: 'if',
    },
})

Tab pane interaction

You can add @click:pane to Tabs component to intercept click on tab pane.

vue
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
function handlePaneClick(): void {
    console.log("Click!")
}
</script>
<template>
  <tabs variant="pills" v-model="activeTab" class="p-5" @click:pane="handlePaneClick">
    <tab name="first" title="First">
      Lorem...
    </tab>
    <tab name="second" title="Second">
      Lorem...
    </tab>
    <tab name="third" title="Third">
      Lorem...
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Lorem...
    </tab>
  </tabs>
</template>
<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
function handlePaneClick(): void {
    console.log("Click!")
}
</script>
<template>
  <tabs variant="pills" v-model="activeTab" class="p-5" @click:pane="handlePaneClick">
    <tab name="first" title="First">
      Lorem...
    </tab>
    <tab name="second" title="Second">
      Lorem...
    </tab>
    <tab name="third" title="Third">
      Lorem...
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Lorem...
    </tab>
  </tabs>
</template>

Released under the MIT License.