Tabs

Tabs

Simple responsive horizontal navigation tabs, with different styles

The tabs are a straightforward navigation component that come in a variety of versions. They only require the following structure:

a tabs container
a <ul> HTML element
a list of <li> HTML element
<a> HTML anchor elements for each link

The default tabs style has a single border at the bottom.

Pictures
Music
Videos
Documents

<div class="tabs">
    <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
    </ul>
</div>

Alignment

Pictures
Music
Videos
Documents

Pictures
Music
Videos
Documents

<div class="tabs is-centered">
    <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
    </ul>
</div>

<div class="tabs is-right">
    <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
    </ul>
</div>

Icon

Pictures
Music
Videos
Documents

<div class="tabs is-centered">
    <ul>
        <li class="is-active">
            <a>
                <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
                <span>Pictures</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
                <span>Music</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
                <span>Videos</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
                <span>Documents</span>
            </a>
        </li>
    </ul>
</div>

Sizes

Pictures
Music
Videos
Documents

Pictures
Music
Videos
Documents

Pictures
Music
Videos
Documents

<div class="tabs is-small">
    <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
    </ul>
</div>

<div class="tabs is-medium">
    <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
    </ul>
</div>

<div class="tabs is-large">
    <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
    </ul>
</div>

Styles

Pictures
Music
Videos
Documents

Pictures
Music
Videos
Documents

Pictures
Music
Videos
Documents

Left
Up
Right

<div class="tabs is-boxed">
    <ul>
        <li class="is-active">
            <a>
                <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
                <span>Pictures</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
                <span>Music</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
                <span>Videos</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
                <span>Documents</span>
            </a>
        </li>
    </ul>
</div>

<div class="tabs is-toggle">
    <ul>
        <li class="is-active">
            <a>
                <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
                <span>Pictures</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
                <span>Music</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
                <span>Videos</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
                <span>Documents</span>
            </a>
        </li>
    </ul>
</div>

<div class="tabs is-toggle is-toggle-rounded">
    <ul>
        <li class="is-active">
            <a>
                <span class="icon is-small"><i class="fas fa-image"></i></span>
                <span>Pictures</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-music"></i></span>
                <span>Music</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-film"></i></span>
                <span>Videos</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
                <span>Documents</span>
            </a>
        </li>
    </ul>
</div>

<div class="tabs is-fullwidth">
    <ul>
        <li>
            <a>
                <span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
                <span>Left</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
                <span>Up</span>
            </a>
        </li>
        <li>
            <a>
                <span>Right</span>
                <span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
            </a>
        </li>
    </ul>
</div>

Combining

Pictures
Music
Videos
Documents

Pictures
Music
Videos
Documents

Pictures
Music
Videos
Documents

Pictures
Music
Videos
Documents

<div class="tabs is-centered is-boxed">
    <ul>
        <li class="is-active">
            <a>
                <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
                <span>Pictures</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
                <span>Music</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
                <span>Videos</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
                <span>Documents</span>
            </a>
        </li>
    </ul>
</div>

<div class="tabs is-toggle is-fullwidth">
    <ul>
        <li class="is-active">
            <a>
                <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
                <span>Pictures</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
                <span>Music</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
                <span>Videos</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
                <span>Documents</span>
            </a>
        </li>
    </ul>
</div>

<div class="tabs is-centered is-boxed is-medium">
    <ul>
        <li class="is-active">
            <a>
                <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
                <span>Pictures</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
                <span>Music</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
                <span>Videos</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
                <span>Documents</span>
            </a>
        </li>
    </ul>
</div>

<div class="tabs is-toggle is-fullwidth is-large">
    <ul>
        <li class="is-active">
            <a>
                <span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
                <span>Pictures</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
                <span>Music</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
                <span>Videos</span>
            </a>
        </li>
        <li>
            <a>
                <span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
                <span>Documents</span>
            </a>
        </li>
    </ul>
</div>

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>

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

Name	Description	Type	Value	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	Value	Default
`label`	Tab label	String	—	—
`icon`	Icon name	String	—	—
`icon-pack`	Icon pack to use	String	—	`fa`
`disabled`	Item is disabled	Boolean	-	false
`visible`	Item is visible	Boolean	-	true

Name slot	Description	Props (if no)
default	Tab item body	—
`header`	Tab item custom header	—

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$tabs-border-bottom-color`	color	`$border`
`$tabs-border-bottom-style`	string	`solid`
`$tabs-border-bottom-width`	size	`1px`
`$tabs-link-color`	color	`$text`
`$tabs-link-hover-border-bottom-color`	color	`$text-strong`
`$tabs-link-hover-color`	color	`$text-strong`
`$tabs-link-active-border-bottom-color`	color	`$link`
`$tabs-link-active-color`	color	`$link`
`$tabs-link-padding`	color	`0.5em 1em`
`$tabs-boxed-link-radius`	size	`$radius`
`$tabs-boxed-link-hover-background-color`	color	`$background`
`$tabs-boxed-link-hover-border-bottom-color`	color	`$border`
`$tabs-boxed-link-active-background-color`	color	`$scheme-main`
`$tabs-boxed-link-active-border-color`	color	`$border`
`$tabs-boxed-link-active-border-bottom-color`	string	`transparent`
`$tabs-toggle-link-border-color`	color	`$border`
`$tabs-toggle-link-border-style`	string	`solid`
`$tabs-toggle-link-border-width`	color	`1px`
`$tabs-toggle-link-hover-background-color`	color	`$background`
`$tabs-toggle-link-hover-border-color`	color	`$border-hover`
`$tabs-toggle-link-radius`	size	`$radius`
`$tabs-toggle-link-active-background-color`	color	`$link`
`$tabs-toggle-link-active-border-color`	color	`$link`
`$tabs-toggle-link-active-color`	color	`$link-invert`