Navigation tabsunderlineanimated

Underline Tabs

Clean tabbed navigation with an animated underline indicator.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { UnderlineTabs } from 'astro-component-kit';
---

<TabUnderline>Content</TabUnderline>
--- import { UnderlineTabs } from 'astro-component-kit'; --- <TabUnderline>Content</TabUnderline>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/UnderlineTabs.astro and paste the following code:

astro 
---
---
<nav class="u-tabs">
  <a href="#" class="active">Profile</a>
  <a href="#">Password</a>
  <a href="#">Sessions</a>
  <div class="indicator"></div>
</nav>
<style>
  .u-tabs { display: flex; gap: 2rem; border-bottom: 2px solid rgba(255,255,255,0.05); position: relative; }
  .u-tabs a { padding: 1rem 0; color: #64748b; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
  .u-tabs a.active { color: #fff; }
  .indicator { position: absolute; bottom: -2px; left: 0; width: 50px; height: 2px; background: #6366f1; transition: 0.3s; }
</style>
--- --- <nav class="u-tabs"> <a href="#" class="active">Profile</a> <a href="#">Password</a> <a href="#">Sessions</a> <div class="indicator"></div> </nav> <style> .u-tabs { display: flex; gap: 2rem; border-bottom: 2px solid rgba(255,255,255,0.05); position: relative; } .u-tabs a { padding: 1rem 0; color: #64748b; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.3s; } .u-tabs a.active { color: #fff; } .indicator { position: absolute; bottom: -2px; left: 0; width: 50px; height: 2px; background: #6366f1; transition: 0.3s; } </style>

Quick Info

Category
Navigation
Filename
UnderlineTabs.astro
Dependencies
None — pure Astro + CSS
Tags
tabsunderlineanimated