# Tabs

Responsive horizontal navigation tabs, switch between contents with ease


edit on github

# Examples

# Base

# Custom header

# Long header

# Vertical

# Types

# Position

# Class props

📄 Full scss file


How does 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


# Props

Prop name Description Type Values Default
animated Tab will have an animation boolean -
From config

tabs: {
  animated: true
}
destroyOnHide Destroy tab on hide boolean - false
expanded Tabs will be expanded (full-width) boolean -
multiline Show tab items multiline when there is no space boolean -
override Override classes boolean - false
position Position of the tab, optional string centered, right
size Tab size, optional string small, medium, large
type Tab type string boxed, toggle 'default'
v-model string|number -
variant Color of the control, optional string|object primary, info, success, warning, danger, and any other custom color
vertical Show tab in vertical layout boolean - false

# Events

Event name Properties Description
input

# Slots

Name Description Bindings
start
end
default

# Tab Item

# Props

Prop name Description Type Values Default
disabled Item will be disabled boolean -
icon Icon on the left string -
iconPack Icon pack string -
label Item label string -
override Override classes boolean - false
tag Tabs item tag name string -
From config

tabs: {
  itemTag: 'button'
}
value Item value (it will be used as v-model of wrapper component) string|number -
visible Show/hide item boolean - true

# Slots

Name Description Bindings
default

# Style

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