Github Style Tab Menu

CSS needed for the Github Tab Menu on a repo homepage.

Usage

• Add the class .liable-puppy to the outer div.
• Each menu item must consist of an outer and inner element. The outer element can be anything, the inner element must be an <a> or <button>.
• Add .active to the menu item to give it the active class.
• Override default colors, font-sizes, padding by adding your own variables.

Demo

Structure

<div class="liable-puppy">
  <div class="active">
    <button>Content</button>
  </div>
  <div>
    <button>Setup</button>
  </div>
</div>

Example using Mini js

<div class="liable-puppy border-b border-gray-200">
  <div :class="activeTab =='content' ? 'active' : ''">
    <button :click="activeTab='content'" >
      Content
    </button>
  </div>
  <div :class="activeTab =='setup' ? 'active' : ''">
    <button :click="activeTab='setup'">
      Setup
    </button>
  </div>
</div>

Code

.liable-puppy {
  display: flex;
  padding: var(--liable-puppy-outer-padding, 8px 8px 0 8px);
  font-size: var(--liable-puppy-font-size, 14px);
  line-height: var(--liable-puppy-line-height, 14px);
}
.liable-puppy > * {
  padding-bottom: 6px;
}
.liable-puppy > *.active {
  border-bottom-width: var(--liable-puppy-active-border-width, 2px);
  border-color: var(--liable-puppy-active-border-color, #fd8c73);
  font-weight: var(--liable-puppy-active-font-weight, bold);
}
.liable-puppy button,
.liable-puppy a {
  display: flex;
  justify-items: center; /* For Icon Alignment */
  transition-property: background-color;
  transition-duration: 300ms;
  gap: var(--liable-puppy-inner-button-gap, 4px);
  border-radius: var(--liable-puppy-border-radius, 5px);
  padding: var(--liable-puppy-button-padding, 8px);
}
.liable-puppy button:hover,
.liable-puppy a:hover {
  background: var(--liable-puppy-hover-bg-color, #afb8c133);
}