By Espina Studio
Suscribe to our newsletter & get early
access to new content.
Tabs
Overview
Tabs organize content across different screens, data sets, and other interactions.
<div class="col-12">
<!-- TABSTRIP SQUARE -->
<ul class="nav tabstrip tabstrip-square tabstrip-gold horizontal-list-sm" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true"> Inicio </a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false"> Nosotros </a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false"> Contacto </a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade active show" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> Inicio Tab </div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> Nosotros Tab </div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> Contacto Tab </div>
</div>
<!-- END: TABSTRIP SQAURE -->
</div>
.tabstrip {
// STYLE SQUARED
&-square {
justify-content: center;
.nav-link {
border-bottom: 1px solid transparent;
padding: 25px 13px 26px;
transition: color 0.2s ease;
}
}
// MODIFIERS
&-gold {
li {
color: black;
.nav-link {
&.active {
color: #ffc34a;
border-bottom: 1px solid currentColor;
}
&:hover {
color: #ffc34a;
}
}
}
}
}<div class="col-12">
<!-- TABSTRIP LOGO -->
<div class="tabstrip-logo-wrap bg-gray">
<figure class="mb-0">
<svg class="header-logo my-auto" aria-hidden="true" role="icon">
<use href="#header-logo" xlink:href="#header-logo"></use>
</svg>
</figure>
<ul class="nav tabstrip tabstrip-logo tabstrip-gold horizontal-list-sm" id="tabstrip-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tabs-home-tab" data-toggle="pill" href="#tabs-home" role="tab" aria-controls="tabs-home" aria-selected="true"> Inicio </a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="tabs-profile-tab" data-toggle="pill" href="#tabs-profile" role="tab" aria-controls="tabs-profile" aria-selected="false"> Nosotros </a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="tabs-contact-tab" data-toggle="pill" href="#tabs-contact" role="tab" aria-controls="tabs-contact" aria-selected="false">Contacto</a>
</li>
</ul>
</div>
<div class="tab-content" id="tabs-tabContent">
<div class="tab-pane fade show active" id="tabs-home" role="tabpanel" aria-labelledby="tabs-home-tab"> Inicio Tab </div>
<div class="tab-pane fade" id="tabs-profile" role="tabpanel" aria-labelledby="tabs-profile-tab"> Nosotros Tab </div>
<div class="tab-pane fade" id="tabs-contact" role="tabpanel" aria-labelledby="tabs-contact-tab"> Contacto Tab</div>
</div>
<!-- END: TABSTRIP LOGO -->
</div>.tabstrip {
// STYLE SQUARED
&-square {
justify-content: center;
.nav-link {
border-bottom: 1px solid transparent;
padding: 25px 13px 26px;
transition: color 0.2s ease;
}
}
// STYLE SQUARED WITH LOGO AT LEFT
&-logo-wrap {
display: flex;
align-items: center;
justify-content: space-between;
.img-wrap {
height: 45px;
width: 30px;
flex-shrink: 0;
img {
object-fit: contain;
height: 45px;
width: 30px;
}
}
.tabstrip-logo {
justify-content: flex-end;
.nav-link {
border-bottom: 1px solid transparent;
padding: 25px 13px 26px;
transition: color 0.2s ease;
}
}
}
// MODIFIERS
&-gold {
li {
color: black;
.nav-link {
&.active {
color: #ffc34a;
border-bottom: 1px solid currentColor;
}
&:hover {
color: #ffc34a;
}
}
}
}
}
<div class="col-12">
<div class="row">
<div class="col-5 col-lg-3">
<!-- TABSTRIP VERTICAL -->
<ul class="nav tabstrip tabstrip-vertical tabstrip-green d-none d-lg-flex horizontal-list-sm" id="vertical-tab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="vertical-home-tab" data-toggle="pill" href="#vertical-home" role="tab" aria-controls="vertical-home" aria-selected="false">
<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="-2.73196e-08" y1="4.97656" x2="10.625" y2="4.97656" stroke="#D2B684"/>
<path d="M6.25 9.33887L10.6694 4.91945L6.25 0.500033" stroke="#D2B684"/>
</svg>
Inicio
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="vertical-profile-tab" data-toggle="pill" href="#vertical-profile" role="tab" aria-controls="vertical-profile" aria-selected="false">
<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="-2.73196e-08" y1="4.97656" x2="10.625" y2="4.97656" stroke="#D2B684"/>
<path d="M6.25 9.33887L10.6694 4.91945L6.25 0.500033" stroke="#D2B684"/>
</svg>
Nosotros
</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="vertical-contact-tab" data-toggle="pill" href="#vertical-contact" role="tab" aria-controls="vertical-contact" aria-selected="true">
<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="-2.73196e-08" y1="4.97656" x2="10.625" y2="4.97656" stroke="#D2B684"/>
<path d="M6.25 9.33887L10.6694 4.91945L6.25 0.500033" stroke="#D2B684"/>
</svg>
Contacto
</a>
</li>
</ul>
<!-- END: TABSTRIP VERTICAL -->
<!-- DROPDOWN - TABSTRIP -->
<select class="select-input-wrap select-tabstrip select-black d-lg-none selectized" id="select-tabstrip" data-default-sort="" aria-label="tabstrip select" tabindex="-1" style="display: none;"><option value="vertical-home" selected="selected"> Introducción </option></select><div class="selectize-control select-input-wrap select-tabstrip select-black d-lg-none single"><div class="selectize-input items full has-options has-items"><div class="item" data-value="vertical-home"> Introducción </div><input type="text" autocomplete="off" tabindex="" id="select-tabstrip-selectized" aria-label="select-tabstrip-selectized" readonly="" style="width: 4px;"></div><div class="selectize-dropdown single select-input-wrap select-tabstrip select-black d-lg-none" style="display: none;"><div class="selectize-dropdown-content"></div></div></div>
<!-- DROPDOWN - TABSTRIP -->
<!-- SCRIPT - TABSTRIP VERTICAL -->
<script>
$(function () {
var $selectizeInput = $(".section-tabstrip .select-tabstrip").selectize({
persist: false,
create: false,
closeAfterSelect: true,
maxItems: 1,
onInitialize: function () { },
onFocus: function () { }
});
$('.select-tabstrip').on('change', function (e) {
var option = $(this).val();
$('.tabstrip-vertical a[href="#' + option + '"]').tab('show');
});
$(".section-tabstrip .selectize-input input").prop('readonly', 'readonly');
})
</script>
<!-- END: SCRIPT - TABSTRIP VERTICAL -->
</div>
<div class="col-7 col-lg-9">
<div class="tab-content" id="vertical-tabContent">
<div class="tab-pane fade" id="vertical-home" role="tabpanel" aria-labelledby="vertical-home-tab"> Inicio Tab</div>
<div class="tab-pane fade" id="vertical-profile" role="tabpanel" aria-labelledby="vertical-profile-tab"> Nosotros Tab</div>
<div class="tab-pane fade active show" id="vertical-contact" role="tabpanel" aria-labelledby="vertical-contact-tab"> Contacto Tab</div>
</div>
</div>
</div>
</div>.tabstrip {
// STYLE SQUARED
&-square {
justify-content: center;
.nav-link {
border-bottom: 1px solid transparent;
padding: 25px 13px 26px;
transition: color 0.2s ease;
}
}
// STYLE VERTICAL
&-vertical {
flex-direction: column;
.nav-item {
.nav-link {
border-bottom: 1px solid currentColor;
padding: 18px 0 20px;
position: relative;
transition: padding 0.2s ease, color 0.2s ease;
svg {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
&.active {
padding-left: 20px;
svg {
opacity: 1;
}
}
}
&:first-child {
.nav-link {
border-top: 1px solid currentColor;
}
}
}
}
// MODIFIERS
&-gold {
li {
color: black;
.nav-link {
&.active {
color: #ffc34a;
border-bottom: 1px solid currentColor;
}
&:hover {
color: #ffc34a;
}
}
}
}
}
The tab item should always have only one tab panel.
Variant
Purpose
Base Tab
Tabs básicos.
Tabstrip Squared
Estilo de tabs, basados en el diseño de Universidad Panamericana.
Copied to clipboard