Tabs

Responsive horizontal navigation tabs, switch between contents with ease

Lorem ipsum dolor sit amet.
<template>
    <section>
        <div class="block">
            <b-button label="Set Music" @click="activeTab = 1" />
        </div>
        <div class="block">
            <b-switch v-model="showBooks"> Show Books item </b-switch>
        </div>
        <b-tabs v-model="activeTab">
            <b-tab-item label="Pictures">
                Lorem ipsum dolor sit amet.
            </b-tab-item>

            <b-tab-item label="Music">
                Lorem <br>
                ipsum <br>
                dolor <br>
                sit <br>
                amet.
            </b-tab-item>

            <b-tab-item :visible="showBooks" label="Books">
                What light is light, if Silvia be not seen? <br>
                What joy is joy, if Silvia be not by— <br>
                Unless it be to think that she is by <br>
                And feed upon the shadow of perfection? <br>
                Except I be by Silvia in the night, <br>
                There is no music in the nightingale.
            </b-tab-item>

            <b-tab-item label="Videos" disabled>
                Nunc nec velit nec libero vestibulum eleifend.
                Curabitur pulvinar congue luctus.
                Nullam hendrerit iaculis augue vitae ornare.
                Maecenas vehicula pulvinar tellus, id sodales felis lobortis eget.
            </b-tab-item>
        </b-tabs>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                activeTab: 0,
                showBooks: false
            }
        }
    }
</script>

# Dynamic

Items can be created / modified / deleted and will always keep the defined order.

You can also use v-if to show (or not) a Tab Item.

Pictures: Lorem ipsum dolor sit amet.
<template>
    <section>
        <div class="block">
            <b-switch v-model="showMusic"> Show Music item (using <code>v-if</code>) </b-switch>
        </div>
        <div class="block">
            <b-switch v-model="showBooks"> Show books item (by adding / removing from the array) </b-switch>
        </div>
        <div class="block">
            <b-switch v-model="multiline">Multiline</b-switch>
        </div>
        <b-tabs v-model="activeTab" :multiline="multiline">
            <template v-for="(tab, index) in tabs" :key="tab.id">
                <b-tab-item
                    v-if="tab.displayed"
                    :order="index"
                    :value="tab.id"
                    :label="tab.label">
                    {{ tab.content }}
                </b-tab-item>
            </template>
        </b-tabs>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                activeTab: 'pictures',
                showMusic: true,
                showBooks: false,
                multiline: true
            }
        },
        computed: {
            baseTabs() {
                return [
                    {
                        id: 'pictures',
                        label: 'Pictures',
                        content: 'Pictures: Lorem ipsum dolor sit amet.',
                        displayed: true,
                    },
                    {
                        id: 'music',
                        label: 'Music',
                        content: 'Music: Lorem ipsum dolor sit amet.',
                        displayed: this.showMusic,
                    },
                    {
                        id: 'videos',
                        label: 'Videos',
                        content: 'Videos: Lorem ipsum dolor sit amet.',
                        displayed: true,
                    },
                    {
                        id: 'games',
                        label: 'Games',
                        content: 'Games: Lorem ipsum dolor sit amet.',
                        displayed: true,
                    },
                    {
                        id: 'comics',
                        label: 'Comics',
                        content: 'Comics: Lorem ipsum dolor sit amet.',
                        displayed: true,
                    },
                    {
                        id: 'movies',
                        label: 'Movies',
                        content: 'Movies: Lorem ipsum dolor sit amet.',
                        displayed: true,
                    }
                ]
            },
            tabs() {
                const tabs = [...this.baseTabs]
                if (this.showBooks) {
                    tabs.splice(tabs.length - 2, 0, this.bookTab);
                }
                return tabs
            },
            bookTab() {
                return {
                    id: 'books',
                    label: 'Books',
                    content: 'Books: Lorem ipsum dolor sit amet.',
                    displayed: true,
                }
            }
        }
    }
</script>

# Position

<template>
    <section>
        <b-tabs position="is-centered" class="block">
            <b-tab-item label="Pictures"></b-tab-item>
            <b-tab-item label="Music"></b-tab-item>
            <b-tab-item label="Videos"></b-tab-item>
        </b-tabs>

        <b-tabs position="is-right" class="block">
            <b-tab-item label="Pictures"></b-tab-item>
            <b-tab-item label="Music"></b-tab-item>
            <b-tab-item label="Videos"></b-tab-item>
        </b-tabs>
    </section>
</template>

# Icons

<template>
    <b-tabs>
        <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
        <b-tab-item label="Music" icon="library-music"></b-tab-item>
        <b-tab-item label="Videos" icon="video"></b-tab-item>
    </b-tabs>
</template>

# Sizes

<template>
    <section>
        <b-tabs size="is-small" class="block">
            <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
            <b-tab-item label="Music" icon="library-music"></b-tab-item>
            <b-tab-item label="Videos" icon="video"></b-tab-item>
        </b-tabs>

        <b-tabs size="is-medium" class="block">
            <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
            <b-tab-item label="Music" icon="library-music"></b-tab-item>
            <b-tab-item label="Videos" icon="video"></b-tab-item>
        </b-tabs>

        <b-tabs size="is-large" class="block">
            <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
            <b-tab-item label="Music" icon="library-music"></b-tab-item>
            <b-tab-item label="Videos" icon="video"></b-tab-item>
        </b-tabs>
    </section>
</template>

# Types

If you want a more classic style with borders add the is-boxed type.

Or like Radio Buttons with the is-toggle or is-toggle-rounded type.

<template>
    <section>
        <b-tabs type="is-boxed">
            <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
            <b-tab-item label="Music" icon="library-music"></b-tab-item>
            <b-tab-item label="Videos" icon="video"></b-tab-item>
        </b-tabs>

        <b-tabs type="is-toggle">
            <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
            <b-tab-item label="Music" icon="library-music"></b-tab-item>
            <b-tab-item label="Videos" icon="video"></b-tab-item>
        </b-tabs>

        <b-tabs type="is-toggle-rounded">
            <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
            <b-tab-item label="Music" icon="library-music"></b-tab-item>
            <b-tab-item label="Videos" icon="video"></b-tab-item>
        </b-tabs>
    </section>
</template>

# Expanded

If you want the tabs to take full width, add the expanded prop.

<template>
    <b-tabs type="is-toggle" expanded>
        <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
        <b-tab-item label="Music" icon="library-music"></b-tab-item>
        <b-tab-item label="Videos" icon="video"></b-tab-item>
    </b-tabs>
</template>

# Custom Headers

By adding a slot named header you can customize the header of a tab item.

<template>
    <b-tabs type="is-boxed">
        <b-tab-item>
            <template #header>
                <b-icon icon="information-outline"></b-icon>
                <span> Issues <b-tag rounded> 3 </b-tag> </span>
            </template>
        </b-tab-item>
        <b-tab-item>
            <template #header>
                <b-icon icon="source-pull"></b-icon>
                <span> Pull Requests <b-tag rounded> {{count}} </b-tag> </span>
            </template>
        </b-tab-item>
    </b-tabs>
</template>

<script>
export default {
    data() {
        return {
            count: 1
        }
    },
    mounted() {
        setTimeout(() => {
            this.count++;
        }, 3 * 1000)
    }
}
</script>


# Vertical

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
<template>
    <section>
        <b-field grouped group-multiline>
            <div class="control">
                <b-switch v-model="atRight"> Right position </b-switch>
            </div>
            <div class="control">
                <b-switch v-model="expanded"> Expanded </b-switch>
            </div>
            <b-field label="Size" label-position="on-border">
                <b-select v-model="size" placeholder="Size">
                    <option :value="null">Default</option>
                    <option value="is-small">Small</option>
                    <option value="is-medium">Medium</option>
                    <option value="is-large">Large</option>
                </b-select>
            </b-field>
            <b-field label="Type" label-position="on-border">
                <b-select v-model="type" placeholder="Type">
                    <option :value="null">Default</option>
                    <option value="is-boxed">Boxed</option>
                    <option value="is-toggle">Toggle</option>
                </b-select>
            </b-field>
        </b-field>

        <b-tabs :position="atRight ? 'is-right' : ''"
                :size="size"
                :type="type"
                vertical
                :expanded="expanded">
            <b-tab-item label="Pictures" icon="google-photos">
                Lorem ipsum dolor sit amet. <br>
                Lorem ipsum dolor sit amet. <br>
                Lorem ipsum dolor sit amet. <br>
                Lorem ipsum dolor sit amet. <br>
                Lorem ipsum dolor sit amet. <br>
                Lorem ipsum dolor sit amet.
            </b-tab-item>

            <b-tab-item label="Music" icon="library-music">
                What light is light, if Silvia be not seen? <br>
                What joy is joy, if Silvia be not by— <br>
                Unless it be to think that she is by <br>
                And feed upon the shadow of perfection? <br>
                Except I be by Silvia in the night, <br>
                There is no music in the nightingale.
            </b-tab-item>

            <b-tab-item label="Videos" icon="video" disabled>
                Nunc nec velit nec libero vestibulum eleifend.
                Curabitur pulvinar congue luctus.
                Nullam hendrerit iaculis augue vitae ornare.
                Maecenas vehicula pulvinar tellus, id sodales felis lobortis eget.
            </b-tab-item>
        </b-tabs>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                expanded: false,
                atRight: false,
                size: null,
                type: null
            }
        }
    }
</script>

# API

Tabs

Name
Description
Type
Values
Default
v-modelBinding value, tab index. Passing undefined will show the first tab, null will show no tabString, Number, Nullundefined
expandedMake tab full widthBooleanfalse
animatedTabs have slide animationBooleantrue
animateInitiallyApply animation on the initial renderBooleanundefined
animationCustom animation (transition name)Stringslide-next slide-prev
typeType/Style of the tab, optionalStringis-boxed, is-toggle
sizeSize of the tab, optionalStringis-small, is-medium, is-large
positionPosition of the tab, optionalStringis-centered, is-right
verticalDisplay the tabs vertically. The content will be placed at right.Booleanfalse
destroy-on-hideDestroy tabitem on hideBooleanfalse
multilineTabs will be multilinedBooleanfalse

Item

Name
Description
Type
Values
Default
labelTab labelString
valueTab identifierStringVnode uid
iconIcon nameString
icon-packIcon pack to useStringmdi
disabledItem is disabledBoolean-false
visibleItem is visibleBoolean-true
headerClassThe classes to add to the tab headerString, Array, Object--

# Variables

You can use these variables to customize this component.

Name
Default
$tabs-focused-outlinenone
$tabs-items-focused-outlinenone
$tabs-link-focus-active-border-bottom-color$tabs-link-active-border-bottom-color
$tabs-link-focus-border-bottom-color$tabs-link-hover-border-bottom-color
$tabs-boxed-link-focus-active-background-color$tabs-boxed-link-active-background-color
$tabs-boxed-link-focus-background-color$tabs-boxed-link-hover-background-color
$tabs-boxed-link-focus-active-border-bottom-color$tabs-boxed-link-active-border-bottom-color
$tabs-boxed-link-focus-border-bottom-color$tabs-boxed-link-hover-border-bottom-color
$tabs-toggle-link-focus-active-background-color$tabs-toggle-link-active-background-color
$tabs-toggle-link-focus-background-color$tabs-toggle-link-hover-background-color
$tabs-toggle-link-focus-active-border-color$tabs-toggle-link-active-border-color
$tabs-toggle-link-focus-border-color$tabs-toggle-link-hover-border-color