Tabs

Responsive horizontal navigation tabs, switch between contents with ease

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>

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> 1 </b-tag> </span>
            </template>
        </b-tab-item>
    </b-tabs>
</template>

API

Tabs

Name
Description
Type
Values
Default
v-modelBinding value, tab index Number 0
expandedMake tab full width Boolean false
animatedTabs have slide animation Boolean true
typeType/Style of the tab, optional String is-boxed, is-toggle
sizeSize of the tab, optional String is-small, is-medium, is-large
positionPosition of the tab, optional String is-centered, is-right

Tab Item

Name
Description
Type
Values
Default
labelTab label String
iconIcon name String
icon-packIcon pack to use String mdi
disabledItem is disabled Boolean -false
visibleItem is visible Boolean -true

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

Improve this page on GitHub