Pill Nav
HomeAboutBlogContact
<div style="display:inline-flex;gap:4px;background:#1e293b;padding:4px;border-radius:9999px"><span style="padding:8px 20px;border-radius:9999px;background:#6366f1;color:#fff;font-size:0.85em;font-weight:600;cursor:pointer">Home</span><span style="padding:8px 20px;border-radius:9999px;color:#94a3b8;font-size:0.85em;font-weight:500;cursor:pointer">About</span><span style="padding:8px 20px;border-radius:9999px;color:#94a3b8;font-size:0.85em;font-weight:500;cursor:pointer">Blog</span><span style="padding:8px 20px;border-radius:9999px;color:#94a3b8;font-size:0.85em;font-weight:500;cursor:pointer">Contact</span></div>Customize
#6366f1
#1e293b
Props
| Name | Type | Default | Description |
|---|---|---|---|
text | text | Home | Displayed text |
activeColor | color | #6366f1 | Active pill color |
bgColor | color | #1e293b | Container background |
Pill-shaped navigation tab bar