Github Repo v1.0.1


You can also have tabs without a .nav bar. Simply make a .tabs container and add links in it. To make tabs go full width just add a is-full class.


<nav class="tabs">
  <a>Tab 1</a>
  <a>Tab 2</a>
  <a class="active">Tab 3</a>
<nav class="tabs full">
  <a>Tab 1</a>
  <a class="active">Tab 2</a>
  <a>Tab 3</a>


Copy these styles for new projects to customize styling.

/* Tabs */
.tabs > a {
  padding: 1rem 2rem;
  color: #555;
  border-bottom: 2px solid var(--lightGrey-color);
.tabs >,
.tabs > a:hover {
  opacity: 1;
  border-bottom: 2px solid #555;
.tabs > {
  border-color: var(--primary-color);