Tabs

Responsive horizontal navigation tabs, switch between contents with ease

Examples

Base

Show Books item Multiline

hat light is light, if Silvia be not seen?
What joy is joy.

Lorem ipsum dolor sit amet.

Lorem
ipsum
dolor
sit
amet.

What light is light, if Silvia be not seen?
What joy is joy, if Silvia be not by—
Unless it be to think that she is by
And feed upon the shadow of perfection?
Except I be by Silvia in the night,
There is no music in the nightingale.

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.

Show code

Types

Boxed

Toggle

Show code

Position

Show code

Sizes

Show code

Vertical

Right position

Expanded

Size

Type

Show code

HTMLJS

html

<section>
    <o-field grouped group-multiline>
        <o-field>
            <o-switch v-model="atRight"> Right position </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="expanded"> Expanded </o-switch>
        </o-field>
        <o-field label="Size">
            <o-select v-model="size" placeholder="Size">
                <option :value="null">Default</option>
                <option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
            </o-select>
        </o-field>
        <o-field label="Type">
            <o-select v-model="type" placeholder="Type">
                <option value="default">Default</option>
                <option value="boxed">Boxed</option>
                <option value="toggle">Toggle</option>
            </o-select>
        </o-field>
    </o-field>

    <o-tabs
        :position="atRight ? 'right' : ''"
        :size="size"
        :type="type"
        vertical
        :expanded="expanded">
        <o-tab-item label="Pictures" icon="images">
            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.
        </o-tab-item>

        <o-tab-item label="Music" icon="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.
        </o-tab-item>

        <o-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.
        </o-tab-item>
    </o-tabs>
</section>

html

import { ref } from "vue";

const expanded = ref(false);
const atRight = ref(false);
const size = ref(null);
const type = ref("default");

scss

css

Custom header

Show code

Long header

Show code

Class props

Lorem ipsum dolor sit amet.

Lorem
ipsum
dolor
sit
amet.

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.

How does the Class props inspector work?

Class prop	Description	Props	Suffixes
contentClass	Class of the tab content.
expandedClass	Class of Tabs component when expanded.	`expanded`
▷ itemClass	Class of the tab item.
▷ itemHeaderActiveClass	Class of the tab item header when active.		`default boxed toggle`
▷ itemHeaderClass	Class of the tab item header. 🔍 Classes applied have a higher specificity than expected when verticalClass* or expandedClass or positionClass is applied*
▷ itemHeaderDisabledClass	Class of the tab item header when disabled.		`default boxed toggle`
▷ itemHeaderIconClass	Class of the tab item header icon.
▷ itemHeaderTextClass	Class of the tab item header text.
▷ itemHeaderTypeClass	Class of the tab item header type.		`default boxed toggle`
multilineClass	Class of Tabs component when multiline.	`multiline`
navPositionClass	Class of the Tabs component nav position.	`position`	`bottom left right`
navSizeClass	Size of the navigation.	`size`	`small medium large`
navTabsClass	Class of the Tabs component nav tabs. 🔍 Classes applied have a higher specificity than expected when positionClass* is applied*
navTypeClass	Type of the navigation.	`type`	`default boxed toggle`
positionClass	Class of Tabs component when when is vertical and its position changes.	`position vertical`	`bottom left right`
rootClass	Root class of the element.
tabItemWrapperClass	Class of the tab item wrapper. 🔍 Classes applied have a higher specificity than expected when expandedClass* is applied*
verticalClass	Class of Tabs component when vertical.	`vertical`

Tabs component

html

<o-tabs></o-tabs>

Props

Prop name	Description	Type	Values	Default
animated	Tab will have an animation	boolean	-	From config: `tabs: { animated: true }`
expanded	Tabs will be expanded (full-width)	boolean	-
multiline	Show tab items multiline when there is no space	boolean	-
override		boolean	-
type	Tab type	string	`boxed`, `toggle`	'default'

Slots

Name	Description	Bindings
start
end
default

TabItem component

html

<o-tab-item></o-tab-item>

Props

Prop name	Description	Type	Values	Default
disabled	Item will be disabled	boolean	-
override		boolean	-
tag	Tabs item tag name	string \| Component	-	From config: `tabs: { itemTag: 'button' }`

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$tabs-disabled-opacity	$base-disabled-opacity
$tabs-font-size	$base-font-size
$tabs-icon-margin	0.5em
$tabs-content-padding	1rem
$tabs-margin-bottom	1.5rem
$tabs-border-bottom-color	$grey-lighter
$tabs-border-bottom-style	solid
$tabs-border-bottom-width	1px
$tabs-link-color	hsl(0, 0%, 29%)
$tabs-link-active-border-bottom-color	$primary
$tabs-link-active-color	$primary
$tabs-link-line-height	$base-line-height
$tabs-link-padding	0.5em 1em
$tabs-boxed-link-radius	$base-border-radius
$tabs-boxed-link-hover-background-color	hsl(0, 0%, 96%)
$tabs-boxed-link-hover-border-bottom-color	hsl(0, 0%, 86%)
$tabs-boxed-link-active-background-color	hsl(0, 0%, 100%)
$tabs-boxed-link-active-border-color	hsl(0, 0%, 86%)
$tabs-boxed-link-active-border-bottom-color	transparent
$tabs-toggle-link-border-color	hsl(0, 0%, 86%)
$tabs-toggle-link-border-style	solid
$tabs-toggle-link-border-width	1px
$tabs-toggle-link-hover-background-color	hsl(0, 0%, 96%)
$tabs-toggle-link-hover-border-color	hsl(0, 0%, 71%)
$tabs-toggle-link-radius	$base-border-radius
$tabs-toggle-link-active-background-color	$primary
$tabs-toggle-link-active-border-color	$primary
$tabs-toggle-link-active-color	$primary-invert

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$tabs-disabled-opacity	$base-disabled-opacity
$tabs-font-size	$base-font-size
$tabs-icon-margin	0.5em
$tabs-content-padding	1rem
$tabs-margin-bottom	1.5rem
$tabs-border-bottom-color	$grey-lighter
$tabs-border-bottom-style	solid
$tabs-border-bottom-width	1px
$tabs-link-color	hsl(0, 0%, 29%)
$tabs-link-active-border-bottom-color	$primary
$tabs-link-active-color	$primary
$tabs-link-line-height	$base-line-height
$tabs-link-padding	0.5em 1em
$tabs-boxed-link-radius	$base-border-radius
$tabs-boxed-link-hover-background-color	hsl(0, 0%, 96%)
$tabs-boxed-link-hover-border-bottom-color	hsl(0, 0%, 86%)
$tabs-boxed-link-active-background-color	hsl(0, 0%, 100%)
$tabs-boxed-link-active-border-color	hsl(0, 0%, 86%)
$tabs-boxed-link-active-border-bottom-color	transparent
$tabs-toggle-link-border-color	hsl(0, 0%, 86%)
$tabs-toggle-link-border-style	solid
$tabs-toggle-link-border-width	1px
$tabs-toggle-link-hover-background-color	hsl(0, 0%, 96%)
$tabs-toggle-link-hover-border-color	hsl(0, 0%, 71%)
$tabs-toggle-link-radius	$base-border-radius
$tabs-toggle-link-active-background-color	$primary
$tabs-toggle-link-active-border-color	$primary
$tabs-toggle-link-active-color	$primary-invert

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default
$nav-tabs-color	var(--#{$prefix}body-color)
$nav-tabs-spacer	$spacer
$nav-tabs-disabled-opacity	0.5
$nav-underline-link-active-bg	$nav-tabs-link-active-bg
$nav-underline-link-active-border-color	currentcolor

See ➜ 📄 Full scss file

Tabs ​

Examples ​

Base

Types

Position

Sizes

Vertical

Custom header

Long header

Class props ​

Class prop

Description

Props

Suffixes

Tabs component ​

Props ​

Slots ​

TabItem component ​

Props ​

Sass variables ​

Tabs

Examples

Class props

Tabs component

Props

Slots

TabItem component

Props

Sass variables