Tab Navigation

This Tab Navigation is used to navigate between to different components(React).

<nav class="tab-nav">
	<ul class="tab-nav__list">
		<li class="tab-nav__list__item tab-nav__list__item--active">
			<button class="btn tab-nav__list__item__button">
				Sign In
			</button>
		</li>
		<li class="tab-nav__list__item">
			<button class="btn tab-nav__list__item__button">
				Sign Up
			</button>
		</li>
	</ul>
</nav>

Notes

To set the current item to active, add the modifier --active to the tab-nav__list__button element.

SCSS

.tab-nav {
	border-bottom: 1px solid $light-grey;
	&__list {
		@include list-unstyled();
		display: flex;
		margin-bottom: 5px;
		justify-content: space-around;
		&__item {
			position: relative;
			flex-grow: 1;
			&--active {
				&:after {
					content: '';
					position: absolute;
					width: 100%;
					height: 3px;
					background: $primary;
					bottom: -7px;
				}
			}
			&__button {
				width: 100%;
				text-align: center;
				display: block;
				font-size: em(20);
				font-weight: 400;
			}
		}
	}
}