<section ontouchstart role="navigation">
	<nav aria-label="Tab Links Navigation" class="tab-line tab-link" role="menu">
		<a role="menuitem" tabindex="1">home</a>
		<a role="menuitem" tabindex="1">shop</a>
		<a role="menuitem" tabindex="1">blog</a>
		<a role="menuitem" tabindex="1">about</a>
		<a role="menuitem" tabindex="1">contact</a>
		<hr role="none"/>
	</nav>
</section>
<section ontouchstart role="navigation">
	<nav aria-label="Tab Radio Navigation" class="tab-line tab-input tab-radio" role="menu">
		<input aria-labelledby="tab-radio-label-home" id="tab-radio-home" name="tab-radio" role="menuitemradio" tabindex="2" type="radio" value="home"/>
		<input aria-labelledby="tab-radio-label-shop" id="tab-radio-shop" name="tab-radio" role="menuitemradio" tabindex="2" type="radio" value="shop"/>
		<input aria-labelledby="tab-radio-label-blog" id="tab-radio-blog" name="tab-radio" role="menuitemradio" tabindex="2" type="radio" value="blog"/>
		<input aria-labelledby="tab-radio-label-about" id="tab-radio-about" name="tab-radio" role="menuitemradio" tabindex="2" type="radio" value="about"/>
		<input aria-labelledby="tab-radio-label-contact" id="tab-radio-contact" name="tab-radio" role="menuitemradio" tabindex="2" type="radio" value="contact"/>
		<label aria-hidden for="tab-radio-home" id="tab-radio-label-home" role="none">home</label>
		<label aria-hidden for="tab-radio-shop" id="tab-radio-label-shop" role="none">shop</label>
		<label aria-hidden for="tab-radio-blog" id="tab-radio-label-blog" role="none">blog</label>
		<label aria-hidden for="tab-radio-about" id="tab-radio-label-about" role="none">about</label>
		<label aria-hidden for="tab-radio-contact" id="tab-radio-label-contact" role="none">contact</label>
		<hr role="none"/>
	</nav>
</section>
<section ontouchstart role="navigation">
	<nav aria-label="Arrow Radio Navigation" class="tab-input tab-arrow" role="menu">
		<input aria-labelledby="tab-arrow-label-1" id="tab-arrow-1" name="tab-arrow" role="menuitemradio" tabindex="3" type="radio" value="1"/>
		<input aria-labelledby="tab-arrow-label-2" id="tab-arrow-2" name="tab-arrow" role="menuitemradio" tabindex="3" type="radio" value="2"/>
		<input aria-labelledby="tab-arrow-label-3" id="tab-arrow-3" name="tab-arrow" role="menuitemradio" tabindex="3" type="radio" value="3"/>
		<input aria-labelledby="tab-arrow-label-4" id="tab-arrow-4" name="tab-arrow" role="menuitemradio" tabindex="3" type="radio" value="4"/>
		<input aria-labelledby="tab-arrow-label-5" id="tab-arrow-5" name="tab-arrow" role="menuitemradio" tabindex="3" type="radio" value="5"/>
		<label aria-hidden for="tab-arrow-1" id="tab-arrow-label-1" role="none">1</label>
		<label aria-hidden for="tab-arrow-2" id="tab-arrow-label-2" role="none">2</label>
		<label aria-hidden for="tab-arrow-3" id="tab-arrow-label-3" role="none">3</label>
		<label aria-hidden for="tab-arrow-4" id="tab-arrow-label-4" role="none">4</label>
		<label aria-hidden for="tab-arrow-5" id="tab-arrow-label-5" role="none">5</label>
		<hr role="none"/>
	</nav>
</section>
$n: 6;

body {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
}

section {
	width: 100%;
	max-width: 800px;
	padding: $p/2;
	background: lighten($slate, 75%);
	+ main {
		margin-top: $p;
	}
	@media only screen and (min-width: 800px) {
		border-radius: 2px;
	}
}

nav {
	display: flex;
	position: relative;
	background: white;
	border-radius: 2px;
	overflow: hidden;
	hr {
		transition: all 375ms ease-out;
		will-change: transform, background;
		position: absolute;
		left: 0;
		margin: 0;
		border: 0;
		width: calc(100% / #{$n});
		background: lighten($slate, 50%);
	}
	&.tab-line {
		hr {
			bottom: 0;
			height: $p/3;
			border-radius: 2px;
		}
	}
	&.tab-input {
		label {
			display: block;
			padding: $p*2;
			width: calc(100% / #{$n});
			text-align: center;
			text-transform: capitalize;
		}
		input {
			cursor: pointer;
			opacity: 0;
			appearance: none;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			margin: 0;
			width: calc(100% / #{$n});
			height: 100%;
			z-index: 2;
			&:hover {
				~ hr {
					background: mix(lighten($slate, 50%), $blue, 75%);
					transition: transform 250ms cubic-bezier(0,.5,.5,1.1), background 250ms ease-out;
				}
			}
			&:active {
				~ hr {
					background: $blue;
					transition: all 250ms ease-out;
				}
			}
			@for $i from 1 through $n {
				&:nth-of-type(#{$i}) {
					left: calc(100% / #{$n} * #{$i - 1});
					&:checked {
						~ hr {
							transform: translateX(#{($i - 1) * 100%});
						}
					}
					&:hover, &:focus, &:active {
						~ hr, ~ input:checked ~ hr {
							transform: translateX(#{($i - 1) * 100%});
						}
					}
				}
			}
		}
	}
	&.tab-link {
		a {
			display: block;
			width: calc(100% / #{$n});
			padding: $p*2;
			text-align: center;
			text-transform: capitalize;
			&:hover {
				~ hr {
					background: mix(lighten($slate, 50%), $blue, 75%);
					transition: transform 250ms cubic-bezier(0,.5,.5,1.1), background 250ms ease-out;
				}
			}
			&:active {
				~ hr {
					background: $blue;
					transition: all 250ms ease-out;
				}
			}
			@for $i from 1 through $n {
				&:nth-child(#{$i}) {
					&.active {
						~ hr {
							transform: translateX(#{($i - 1) * 100%});
						}
					}
					&:hover, &:focus, &:active {
						~ hr, ~ .active ~ hr {
							transform: translateX(#{($i - 1) * 100%});
						}
					}
				}
			}
		}
	}
	&.tab-arrow {
		hr {
			z-index: 1;
			height: 100%;
			&:before, &:after {
				transition: all 375ms ease-out;
				will-change: border-color;
				content: "";
				display: block;
				position: absolute;
				top: 0;
				border: 32px solid lighten($slate, 50%);
				border-left-width: $p;
				border-right-width: $p;
			}
			&:before {
				left: 0;
				border-left-color: white!important;
			}
			&:after {
				right: -$p/2;
				border-top-color: white!important;
				border-bottom-color: white!important;
				border-right-color: white!important;
			}
		}
		label {
			z-index: 2;
		}
		input {
			z-index: 3;
			&:hover {
				~ hr {
					&:before, &:after {
						border-color: mix(lighten($slate, 50%), $blue, 75%);
						transition: all 250ms ease-out;
					}
				}
			}
			&:active {
				~ hr {
					&:before, &:after {
						border-color: $blue;
						transition: all 250ms ease-out;
					}
				}
			}
			@for $i from 1 through $n {
				&:nth-of-type(#{$i}) {
					&:active {
						+ label {
							color: white;
						}
					}
				}
			}
		}
	}
}

External CSS

  1. https://fonts.googleapis.com/css?family=Libre+Franklin:100,200,300,400,500,600
  2. https://codepen.io/tutsplus/pen/598c614630b8b6882828b40d33bdbf3a

External JavaScript

This Pen doesn't use any external JavaScript resources.