From basic tabs and breadcrumbs to full-featured navbars, sidebars, and mega menus. Production-ready navigation patterns.
Underline Tabs
Classic underline tabs for switching between content sections.
| 1 | <div "color:#79c0ff">className="flex border-b border-border"> |
| 2 | {["Overview", "Features", "Pricing", "FAQ"].map((tab, i) => ( |
| 3 | <button |
| 4 | "color:#79c0ff">key={tab} |
| 5 | "color:#79c0ff">className={`border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${ |
| 6 | i === 0 |
| 7 | ? "border-primary text-primary" |
| 8 | : "border-transparent text-muted hover:border-border hover:text-foreground" |
| 9 | }`} |
| 10 | > |
| 11 | {tab} |
| 12 | </button> |
| 13 | ))} |
| 14 | </div> |
Pill Tabs
Segmented pill-style tabs with a floating indicator.
| 1 | <div "color:#79c0ff">className="inline-flex rounded-xl bg-secondary p-1"> |
| 2 | {["All", "Active", "Draft", "Archived"].map((tab, i) => ( |
| 3 | <button |
| 4 | "color:#79c0ff">key={tab} |
| 5 | "color:#79c0ff">className={`rounded-lg px-4 py-1.5 text-sm font-medium transition-all ${ |
| 6 | i === 0 ? "bg-card text-foreground shadow-sm" : "text-muted hover:text-foreground" |
| 7 | }`} |
| 8 | > |
| 9 | {tab} |
| 10 | </button> |
| 11 | ))} |
| 12 | </div> |
Breadcrumbs
Breadcrumb navigation for showing page hierarchy.
| 1 | <nav "color:#79c0ff">className="flex items-center gap-2 text-sm"> |
| 2 | <a "color:#79c0ff">href="#" "color:#79c0ff">className="text-muted hover:text-primary">Home</a> |
| 3 | <svg "color:#79c0ff">className="h-4 w-4 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| 4 | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> |
| 5 | </svg> |
| 6 | <a "color:#79c0ff">href="#" "color:#79c0ff">className="text-muted hover:text-primary">Components</a> |
| 7 | <svg "color:#79c0ff">className="h-4 w-4 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| 8 | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> |
| 9 | </svg> |
| 10 | <span "color:#79c0ff">className="font-medium text-foreground">Navigation</span> |
| 11 | </nav> |
Pagination
Page navigation with numbered pages and prev/next controls.
| 1 | <div "color:#79c0ff">className="flex items-center gap-1"> |
| 2 | <button "color:#79c0ff">className="rounded-lg border border-border px-3 py-1.5 text-sm text-muted hover:bg-secondary">← Prev</button> |
| 3 | {[1,2,3,"...",8,9,10].map((page, i) => ( |
| 4 | <button "color:#79c0ff">key={i} "color:#79c0ff">className={`rounded-lg px-3 py-1.5 text-sm font-medium ${ |
| 5 | page === 1 ? "bg-primary text-white" : page === "..." ? "text-muted" : "text-muted hover:bg-secondary" |
| 6 | }`}>{page}</button> |
| 7 | ))} |
| 8 | <button "color:#79c0ff">className="rounded-lg border border-border px-3 py-1.5 text-sm text-muted hover:bg-secondary">Next →</button> |
| 9 | </div> |
Sidebar Navigation
Main
Settings
Vertical sidebar with grouped navigation items and active state.
| 1 | <aside "color:#79c0ff">className="w-60 rounded-xl border border-border bg-card p-4"> |
| 2 | <p "color:#79c0ff">className="px-3 text-xs font-semibold uppercase tracking-wider text-muted">Main</p> |
| 3 | <nav "color:#79c0ff">className="mt-2 space-y-0.5"> |
| 4 | {[ |
| 5 | { label: "Dashboard", active: true }, |
| 6 | { label: "Analytics", active: false }, |
| 7 | { label: "Projects", active: false }, |
| 8 | { label: "Team", active: false }, |
| 9 | ].map((item) => ( |
| 10 | <button "color:#79c0ff">key={item.label} "color:#79c0ff">className={`flex w-full items-center rounded-lg px-3 py-2 text-sm font-medium ${ |
| 11 | item.active ? "bg-primary/10 text-primary" : "text-muted hover:bg-secondary hover:text-foreground" |
| 12 | }`}>{item.label}</button> |
| 13 | ))} |
| 14 | </nav> |
| 15 | </aside> |
Full Featured Navbar
Complete navbar with logo, links, search, notifications, and user dropdown.
| 1 | <nav "color:#79c0ff">className="border-b border-border bg-background"> |
| 2 | <div "color:#79c0ff">className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3"> |
| 3 | {/* Logo */} |
| 4 | <div "color:#79c0ff">className="flex items-center gap-2"> |
| 5 | <div "color:#79c0ff">className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-600 text-sm font-bold text-white">U</div> |
| 6 | <span "color:#79c0ff">className="font-bold text-foreground">UIDrops</span> |
| 7 | </div> |
| 8 | {/* Links */} |
| 9 | <div "color:#79c0ff">className="hidden items-center gap-1 md:flex"> |
| 10 | {["Home","Components","Showcase","Pricing","Docs"].map((l, i) => ( |
| 11 | <a "color:#79c0ff">key={l} "color:#79c0ff">href="#" "color:#79c0ff">className={`rounded-lg px-3 py-2 text-sm font-medium ${ |
| 12 | i === 0 ? "bg-primary/10 text-primary" : "text-muted hover:bg-secondary hover:text-foreground" |
| 13 | }`}>{l}</a> |
| 14 | ))} |
| 15 | </div> |
| 16 | {/* Actions */} |
| 17 | <div "color:#79c0ff">className="flex items-center gap-3"> |
| 18 | <button "color:#79c0ff">className="rounded-lg border border-border p-2 text-muted hover:bg-secondary"> |
| 19 | <svg "color:#79c0ff">className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg> |
| 20 | </button> |
| 21 | <button "color:#79c0ff">className="relative rounded-lg border border-border p-2 text-muted hover:bg-secondary"> |
| 22 | <svg "color:#79c0ff">className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg> |
| 23 | <span "color:#79c0ff">className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-red-500"/> |
| 24 | </button> |
| 25 | <div "color:#79c0ff">className="flex h-8 w-8 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white">A</div> |
| 26 | </div> |
| 27 | </div> |
| 28 | </nav> |
Bottom Navigation Bar
Mobile-style bottom navigation with active state indicators.
| 1 | <nav "color:#79c0ff">className="fixed bottom-0 left-0 right-0 border-t border-border bg-background"> |
| 2 | <div "color:#79c0ff">className="flex items-center justify-around py-2"> |
| 3 | {[ |
| 4 | { label: "Home", icon: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6", active: true }, |
| 5 | { label: "Search", icon: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z", active: false }, |
| 6 | { label: "Saved", icon: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z", active: false }, |
| 7 | { label: "Profile", icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z", active: false }, |
| 8 | ].map((item) => ( |
| 9 | <button "color:#79c0ff">key={item.label} "color:#79c0ff">className="flex flex-col items-center gap-1 px-4 py-1"> |
| 10 | <svg "color:#79c0ff">className={`h-5 w-5 ${item.active ? "text-primary" : "text-muted"}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> |
| 11 | <path strokeLinecap="round" strokeLinejoin="round" d={item.icon} /> |
| 12 | </svg> |
| 13 | <span "color:#79c0ff">className={`text-xs font-medium ${item.active ? "text-primary" : "text-muted"}`}>{item.label}</span> |
| 14 | </button> |
| 15 | ))} |
| 16 | </div> |
| 17 | </nav> |