Tab navigace (tabs)

Latte / Html

  <nav class="tabs-nav js--tabs">
        <div class="tabs-nav__content --content">
            <div class="tabs-nav__nav --flex-inline">
                <ul class="tabs-nav__tabs tabs">
                    <li class="tabs__item">
                        <span class="tabs__link tabs__link--active" data-href="#categories_product">
                            Testovací položka
                        </span>
                    </li>
                    <li class="tabs__item">
                        <span class="tabs__link" data-href="#blogs">
                            Testovací položka 2
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Tabs-content

 <div class="tabs-content">
        <div class="tabs-content__block tabs-content__block--active" id="categories_product">
            Test
        </div>
        <div class="tabs-content__block" id="blogs">
           Test
        </div>
    </div>

CSS / SCSS

/* Tabs */

.tabs {
	display: flex;
	flex-wrap: wrap;
}

.tabs__item {
	margin: 0 12px;
	
	@include media($large){
		margin: 0 20px;
	}
}

.tabs__link {

	font-size: 1.8rem;
	padding: 15px 0;
	display: block;
	color: $color__text;
	
	.tabs__item--selected & {
		border-bottom: 2px solid $color__primary;
	}
	
	.tabs--big & {
		font-weight: 700;
	}
	
	@include media($large){
		padding: 35px 0;
	}
}

.tabs__link--active{
	font-weight: 700;
}


/* Tabs nav */

.tabs-nav{
	background: $color__gray-light;
	top: 0;
	z-index: 900;
}

.tabs-nav__label {
	font-size: 1.8rem;
	padding: 10px 0;
	display: flex;
	font-weight: 700;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	margin: 0 30px 0 0;
}

/* Tabs content */

.tabs-content__block{
	display:none;
	
}
.tabs-content__block--active{
	display: block;
}

.tabs-content__title{
	margin-top: 30px;
	margin-bottom: 20px;
}

Javascript - přepínání tab-content

Je potřeba přidat do webpack.mix.js soubor custom_tabs.js