Tabs

Responsive horizontal navigation tabs, switch between contents with ease

Show Books item

Lorem ipsum dolor sit amet.

<template>
    <section>
        <div class="block">
            <button class="button" @click="activeTab = 1">Set Music</button>
        </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.

Show Music item (using v-if)

Show books item (by adding / removing from the array)

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>
        <b-tabs v-model="activeTab">
            <template v-for="(tab, index) in tabs">
                <b-tab-item
                    v-if="tab.displayed"
                    :key="index"
                    :label="tab.label">
                    {{ tab.content }}
                </b-tab-item>
            </template>
        </b-tabs>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                activeTab: 0,
                showMusic: true,
                showBooks: false
            }
        },
        computed: {
            baseTabs() {
                return [
                    {
                        label: 'Pictures',
                        content: 'Lorem ipsum dolor sit amet.',
                        displayed: true,
                    },
                    {
                        label: 'Music',
                        content: 'Lorem ipsum dolor sit amet.',
                        displayed: this.showMusic,
                    },
                    {
                        label: 'Videos',
                        content: 'Lorem ipsum dolor sit amet.',
                        displayed: true,
                    }
                ]
            },
            tabs() {
                const tabs = [...this.baseTabs]
                if (this.showBooks) {
                    tabs.splice(tabs.length - 1, 0, this.bookTab);
                }
                return tabs
            },
            bookTab() {
                return {
                    label: 'Books',
                    content: '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 slot="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 slot="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

Right position Expanded

Size

Type

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>
            <b-field grouped>
                <b-switch v-model="atRight"> Right position </b-switch>
                <b-switch v-model="expanded"> Expanded </b-switch>
            </b-field>
            <b-field label="Size">
                <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">
                <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-model`	Binding value, tab index	Number	—	`0`
`expanded`	Make tab full width	Boolean	—	`false`
`animated`	Tabs have slide animation	Boolean	—	`true`
`type`	Type/Style of the tab, optional	String	`is-boxed`, `is-toggle`	—
`size`	Size of the tab, optional	String	`is-small`, `is-medium`, `is-large`	—
`position`	Position of the tab, optional	String	`is-centered`, `is-right`	—
`vertical`	Display the tabs vertically. The content will be placed at right.	Boolean	—	`false`
`destroy-on-hide`	Destroy tabitem on hide	Boolean	—	`false`

Name	Description	Parameters
`input`	Triggers when tab is clicked	`index: Number`
`change`	Triggers when active tab is changed	`index: Number`

Tab Item

Name	Description	Type	Values	Default
`label`	Tab label	String	—	—
`icon`	Icon name	String	—	—
`icon-pack`	Icon pack to use	String	—	`mdi`
`disabled`	Item is disabled	Boolean	-	false
`visible`	Item is visible	Boolean	-	true

Slot name	Description	Props (if scoped)
default	Tab item body	—
`header`	Tab item custom header	—

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub