# 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 `
` or ``.
- 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
```html
```
### Example using Mini js
```html
```
### Code
```css
.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);
}
```