<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/scootman/pen/eGjaBZ?limit=all&page=25&q=nav+tabs" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://codepen.io/scootman/pen/BwPepM.css">
<style class="cp-pen-styles">@font-face {
font-family: 'barlow';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/Barlow-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'barlow';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/Barlow-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: barlow,sans-serif;
color: #242428;
background-color: #ececee;
}
a, a:hover {
color: inherit;
text-decoration: none;
}
svg {
fill: currentColor;
}
.svg-defs {
position: absolute;
height: 0;
width: 0;
}
aside, .secondary {
color: #94949e;
}
.dark-ui {
color: white;
}
.dark-ui:not(.no-bgd) {
background-color: #242428;
}
.dark-ui.glazed-bgd {
background-color: rgba(29, 29, 32, 0.97);
-webkit-backdrop-filter: saturate(1.5) blur(7px);
}
.graphic-bgd {
text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
}
.graphic-bgd .secondary {
color: rgba(36, 36, 40, 0.75);
}
.graphic-bgd .dark-ui, .graphic-bgd.dark-ui, dark-ui .graphic-bgd {
text-shadow: 0px 0px 3px rgba(36, 36, 40, 0.5);
}
.graphic-bgd .dark-ui .secondary, .graphic-bgd.dark-ui .secondary, dark-ui .graphic-bgd .secondary {
color: rgba(255, 255, 255, 0.5);
}
.nav-tabs, .nav-bar {
display: flex;
flex-wrap: nowrap;
}
.nav-tabs a, .nav-bar a {
white-space: nowrap;
display: flex;
align-items: center;
box-sizing: content-box;
flex: 0 0 auto;
line-height: 1em;
opacity: 0.6;
transition: opacity 0.125s ease-in-out;
}
.nav-tabs a:hover, .nav-bar a:hover {
opacity: 1;
}
.nav-tabs a.active, .nav-bar a.active {
opacity: 1;
}
.nav-tabs svg, .nav-bar svg {
flex: 0 0 24px;
width: 24px;
height: 24px;
margin-right: 6px;
}
.nav-bar {
height: 100%;
margin: 0 -12px;
}
.nav-bar a {
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
.nav-bar.bookend {
justify-content: space-between;
}
.nav-tabs {
height: 40px;
}
.nav-tabs a {
border-left: 16px solid transparent;
border-right: 16px solid transparent;
}
.nav-tabs a.active {
background-color: #ececee;
}
.dark-ui .nav-tabs a.active {
background-color: #242428;
}
.graphic-bgd .nav-tabs.borderless .nav-group {
background-color: rgba(236, 236, 238, 0.6);
border-radius: 3px 3px 0 0;
-webkit-backdrop-filter: saturate(1.5) blur(7px);
}
.graphic-bgd .dark-ui .nav-tabs.borderless .nav-group, .graphic-bgd.dark-ui .nav-tabs.borderless .nav-group, .dark-ui .graphic-bgd .nav-tabs.borderless .nav-group {
background-color: rgba(36, 36, 40, 0.6);
}
.nav-tabs:not(.borderless) {
position: relative;
}
.nav-tabs:not(.borderless)::before {
content: "";
position: absolute;
bottom: 0;
border-bottom: 1px currentColor solid;
left: 0;
right: 0;
}
.nav-tabs:not(.borderless) a.active {
position: relative;
}
.nav-tabs:not(.borderless) a.active::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -16px;
right: -16px;
border: 1px currentColor solid;
border-bottom: none;
border-radius: 3px 3px 0 0;
}
.nav-tabs.borderless a {
overflow: hidden;
}
@media (max-width: 768px) {
.nav-tabs.icon-only-mobile a {
width: 24px;
}
.nav-tabs.icon-only-mobile:not(.borderless) a span {
display: none;
}
}
.nav-tabs a.active {
border-radius: 3px 3px 0 0;
}
.nav-group {
display: flex;
}
</style></head><body>
<div class="page-layer" id="base">
<header style="flex-basis:96px">
<div class="page-trunk">
<div class="flex-layout vertical bookend">
<p>
Default
</p>
<nav class="nav-tabs">
<a class="active" href="#"><svg class="icon-metrics"></svg>Metrics </a><a href="#"><svg class="icon-toolkit"></svg>Toolkit </a><a href="#"><svg class="icon-person"></svg>Team </a>
</nav>
</div>
</div>
</header>
<div style="flex-basis:48px"></div>
<header style="flex-basis:96px;background-color:hsl(240,5%,88%)">
<div class="page-trunk">
<div class="flex-layout vertical bookend">
<p>
Borderless <span class="secondary">· For use with non-default backgrounds</span>
</p>
<nav class="nav-tabs borderless">
<div class="nav-group">
<a class="active" href="#"><svg class="icon-metrics"></svg>Metrics </a><a href="#"><svg class="icon-toolkit"></svg>Toolkit </a><a href="#"><svg class="icon-person"></svg>Team </a>
</div>
</nav>
</div>
</div>
</header>
<div style="flex-basis:48px"></div>
<header class="graphic-bgd" style="flex-basis:96px;background-color:hsl(240,5%,88%);background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/wyperfeld.jpg);background-size:cover">
<div class="page-trunk">
<div class="flex-layout vertical bookend">
<p class="dark-ui no-bgd">
Borderless <span class="secondary">· With graphic background ancestor class </span>
</p>
<nav class="nav-tabs borderless">
<div class="nav-group">
<a class="active" href="#"><svg class="icon-metrics"></svg>Metrics </a><a href="#"><svg class="icon-toolkit"></svg>Toolkit </a><a href="#"><svg class="icon-person"></svg>Team </a>
</div>
</nav>
</div>
</div>
</header>
<div style="flex-basis:48px"></div>
<header class="dark-ui" style="flex-basis:96px">
<div class="page-trunk">
<div class="flex-layout vertical bookend">
<p>
Default <span class="secondary">· Dark UI</span>
</p>
<nav class="nav-tabs">
<a class="active" href="#"><svg class="icon-metrics"></svg><span>Metrics</span></a><a href="#"><svg class="icon-toolkit"></svg><span>Toolkit</span></a><a href="#"><svg class="icon-person"></svg><span>Team</span></a>
</nav>
</div>
</div>
</header>
<div class="dark-ui" style="flex-basis:48px"></div>
<header class="dark-ui" style="flex-basis:96px;background-color:hsl(240,5%,21%)">
<div class="page-trunk">
<div class="flex-layout vertical bookend">
<p>
Borderless <span class="secondary">· Dark UI + collapse to icons</span>
</p>
<nav class="nav-tabs borderless icon-only-mobile">
<div class="nav-group">
<a class="active" href="#"><svg class="icon-metrics"></svg>Metrics </a><a href="#"><svg class="icon-toolkit"></svg>Toolkit </a><a href="#"><svg class="icon-person"></svg>Team </a>
</div>
</nav>
</div>
</div>
</header>
<div class="dark-ui" style="flex-basis:48px"></div>
<header class="dark-ui graphic-bgd" style="flex-basis:96px;background-color:hsl(240,5%,88%);background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/tropicbird.jpg);background-size:cover">
<div class="page-trunk">
<div class="flex-layout vertical bookend">
<p>
Borderless <span class="secondary">· Dark UI + Graphic background + Collapse</span>
</p>
<nav class="nav-tabs borderless icon-only-mobile">
<div class="nav-group">
<a class="active" href="#"><svg class="icon-metrics"></svg>Metrics </a><a href="#"><svg class="icon-toolkit"></svg>Toolkit </a><a href="#"><svg class="icon-person"></svg>Team </a>
</div>
</nav>
</div>
</div>
</header>
<div class="dark-ui" style="flex-basis:48px"></div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/svg-injector.min.js'></script>
<script >// Not required for kit (used for example purposes only)
$("nav a").click(function(){
var newLink = $(this);
newLink.siblings().removeClass("active");
newLink.addClass("active");
});
(function(window, document){
// Options
var injectorOptions = {
evalScripts: 'once',
// reference fragments via views - generated with grunt-svg-sprite
spritesheetURL: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/mui-assets.svg',
spriteClassIdName: 'icon-'
};
// Setup the injector
var injector = new SVGInjector(injectorOptions);
// inject single svg
injector.inject(document.querySelectorAll('svg[data-src]'));
// inject svgs from spritesheets
injector.inject(document.querySelectorAll('svg[class^=icon-]'));
})(window, document);
//# sourceURL=pen.js
</script>
</body></html>
