Tab Underline
An animated underline indicator that smoothly slides to track the active tab in navigation bars. Ideal for tab-based navigation, settings pages, or content sections where context switching needs visual continuity.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
tabunderlinenavigationactivetracking
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
An animated underline that smoothly tracks the active tab in navigation bars.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; font-family: 'Geist', system-ui, -apple-system, sans-serif; }
.tabs { display: flex; gap: 0; width: 320px; border-bottom: 2px solid #27272a; position: relative; }
.tabs .indicator { position: absolute; bottom: -2px; left: 0; height: 2px; background: #3b82f6; width: 80px; transition: transform 0.35s ease; }
.tab { padding: 12px 20px; cursor: pointer; color: #71717a; font-weight: 500; transition: color 0.2s; }
.tab.active { color: #fff; }HTML
html
<div class="tabs"><div class="indicator"></div><span class="tab active">Home</span><span class="tab">About</span><span class="tab">Contact</span></div>Full Source
html
<!DOCTYPE html>
<html><head><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap" rel="stylesheet"><style>
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; font-family: 'Geist', system-ui, -apple-system, sans-serif; }
.tabs { display: flex; gap: 0; width: 320px; border-bottom: 2px solid #27272a; position: relative; }
.tabs .indicator { position: absolute; bottom: -2px; left: 0; height: 2px; background: #3b82f6; width: 80px; transition: transform 0.35s ease; }
.tab { padding: 12px 20px; cursor: pointer; color: #71717a; font-weight: 500; transition: color 0.2s; }
.tab.active { color: #fff; }
</style></head><body>
<div class="tabs"><div class="indicator"></div><span class="tab active">Home</span><span class="tab">About</span><span class="tab">Contact</span></div>
</body></html>