Tabs

Responsive horizontal navigation tabs, switch between contents with ease

Show Books item

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.

Show Music item (using v-if)

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

Multiline

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 in tabs">
                <b-tab-item
                    v-if="tab.displayed"
                    :key="tab.id"
                    :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

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 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-model`	Binding value, tab index. Passing undefined will show the first tab, null will show no tab	String, Number, Null	—	`undefined`
`expanded`	Make tab full width	Boolean	—	`false`
`animated`	Tabs have slide animation	Boolean	—	`true`
`animateInitially`	Apply animation on the initial render	Boolean	—	`undefined`
`animation`	Custom animation (transition name)	String	—	`slide-next` `slide-prev`
`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`
`multiline`	Tabs will be multilined	Boolean	—	`false`

Name	Description	Parameters
`input`	Triggers when tab is changed	`value: String\|Number`

Item

Name	Description	Type	Values	Default
`label`	Tab label	String	—	—
`value`	Tab identifier	String	—	Vnode uid
`icon`	Icon name	String	—	—
`icon-pack`	Icon pack to use	String	—	`mdi`
`disabled`	Item is disabled	Boolean	-	false
`visible`	Item is visible	Boolean	-	true
`headerClass`	The classes to add to the tab header	String, Array, Object	-	-

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

# Variables

You can use these variables to customize this component.

Name	Default
`$tabs-focused-outline`	`none`
`$tabs-items-focused-outline`	`none`
`$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`

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

Improve this page on GitHub