Navbars

Colecție de bare de navigație pentru proiecte Next.js + TailwindCSS. Exemple live + explicații de utilizare.

SimpleNavbar

Un navbar simplu, cu linkuri la stânga și un buton CTA la dreapta. Ideal pentru site-uri documentație sau landing-uri.

Exemplu cu logo text (doar text).

Exemplu cu logo imagine (doar imagine).

Exemplu cu logo combinat (imagine + text).

Utilizare

import SimpleNavbar from "@/components/navbar-components/SimpleNavbar";

// text only
<SimpleNavbar
  logo="Softeneers"
  items={[
    { label: "Features", href: "/features" },
    { label: "Pricing", href: "/pricing" },
    { label: "Docs", href: "/docs" },
  ]}
  cta={{ label: "Get started", href: "/get-started" }}
/>

// image only
<SimpleNavbar
  logo={{ image: { src: "/softeneerscool.png", alt: "Softeneers" } }}
  items={[
    { label: "Features", href: "/features" },
    { label: "Pricing", href: "/pricing" },
    { label: "Docs", href: "/docs" },
  ]}
  cta={{ label: "Get started", href: "/get-started" }}
/>

// combined
<SimpleNavbar
  logo={{
    combined: {
      image: { src: "/softeneerscool.png", alt: "Softeneers", className: "h-8 w-8" },
      text: { value: "Softeneers", as: "h1", className: "text-lg font-bold" },
    }
  }}
  items={[
    { label: "Features", href: "/features" },
    { label: "Pricing", href: "/pricing" },
    { label: "Docs", href: "/docs" },
  ]}
  cta={{ label: "Get started", href: "/get-started" }}
/>
  • logo — logo text, imagine sau ambele (în funcție de cum este configurat în SimpleNavbar).
  • items — link-urile din stânga (folosește href-uri unice).
  • cta — buton opțional în dreapta.
  • sticky — true implicit, îl fixează sus cu blur.

MegaNavbar

Navbar complex cu mega menu pe desktop (hover) și acordion pe mobil. Potrivit pentru produse cu multe secțiuni.

Conținut de test sub navbar (zona de preview live).

Utilizare

import MegaNavbar from "@/components/navbar-components/MegaNavbar";

<MegaNavbar
  topLinks={[
    { label: "Solutions", href: "/solutions" },
    { label: "Pricing", href: "/pricing" },
  ]}
  sections={[
    {
      title: "Products",
      items: [
        { label: "Analytics", href: "/products/analytics", description: "Dashboard-uri și rapoarte" },
        { label: "Automation", href: "/products/automation", description: "Workflows și trigger-e" },
        { label: "Engagement", href: "/products/engagement", description: "Campanii și CRM" },
      ],
    },
    {
      title: "Resources",
      items: [
        { label: "Docs", href: "/docs", description: "API & ghiduri" },
        { label: "Tutorials", href: "/tutorials", description: "Step-by-step" },
        { label: "Community", href: "/community", description: "Forum & Discord" },
      ],
    },
  ]}
  cta={{ label: "Get started", href: "/get-started" }}
  theme="light"
  logo={{ text: "Softeneers", image: "/logo.png" }}
/>
  • topLinks — link-uri simple afișate în bară.
  • sections — coloane din mega panel (titlu + items).
  • cta — buton opțional la dreapta.
  • theme — tema navbar-ului, poate fi "light" sau "dark" pentru fundal și text.
  • logo — logo-ul navbar-ului, poate fi text simplu, imagine, sau combinație text + imagine.

Exemple suplimentare

// Tema implicită dark cu logo text simplu
<MegaNavbar
  topLinks={[{ label: "Home", href: "/" }]}
  sections={[
    {
      title: "Features",
      items: [
        { label: "Fast", href: "/fast", description: "Rapid și eficient" },
        { label: "Reliable", href: "/reliable", description: "Stabil și sigur" },
      ],
    },
  ]}
  cta={{ label: "Join now", href: "/join" }}
  theme="dark"
  logo={{ text: "Softeneers" }}
/>
// Tema light cu logo ca imagine + text
<MegaNavbar
  topLinks={[{ label: "Home", href: "/" }]}
  sections={[
    {
      title: "Features",
      items: [
        { label: "Fast", href: "/fast", description: "Rapid și eficient" },
        { label: "Reliable", href: "/reliable", description: "Stabil și sigur" },
      ],
    },
  ]}
  cta={{ label: "Join now", href: "/join" }}
  theme="light"
  logo={{ text: "Softeneers", image: "/logo-light.png" }}
/>

DocNavbar

Navbar pentru documentație cu meniu fullscreen, căutare, selector de limbă, coș și CTA — acum 100% configurabil prin labels, theme și features. Componentă client, controlată exclusiv prin props (fără contexte).

Conținut de test sub navbar (zona de preview live). Deschide „Meniu” pentru a vedea overlay-ul full screen.

Props – pe scurt

Structură

  • topLinks — link-urile din bară.
  • overlayLinks — link-urile din overlay (stânga).
  • overlayRight — slot React pentru conținut custom (ex.: Carousel).

Dinamică (labels & features)

  • labels — { menu, search, storeLocator, cart, language }
  • features — { search, language, cta, cart, storeLocator } (toate true implicit)

Temă (culori / stil)

  • theme.navbarBg, theme.navbarText
  • theme.overlayBg, theme.overlayText
  • theme.surfaceBg, theme.surfaceText
  • theme.hoverHighlight, theme.borderColor
Notă SSR/CSR: Nu trece funcții (ex. onLanguageChange) dintr-un Server Component (pagina asta) către un Client Component. Dacă ai nevoie de handler în demo, marchează pagina/secțiunea cu "use client" sau gestionează schimbarea limbii intern în componentă.

Utilizare – varianta de bază

import DocNavbar from "@/components/navbar-components/DocNavbar";

<DocNavbar
  topLinks={[
    { label: "Products", href: "/products" },
    { label: "Pricing", href: "/pricing" },
    { label: "Docs", href: "/docs" },
  ]}
  searchItems={[
    { id: 1, label: "Product 1", href: "/products/1", image: "/globe.svg" },
    { id: 2, label: "Product 2", href: "/products/2", image: "/globe.svg" },
    { id: 3, label: "Product 3", href: "/products/3", image: "/globe.svg" },
  ]}
  cartCount={2}
  storeLocatorHref="/store-locator"
/>

Utilizare – avansat (labels + theme + features)

import DocNavbar from "@/components/navbar-components/DocNavbar";

<DocNavbar
  labels={{
    menu: "Meniu",
    search: "Căutare",
    storeLocator: "Magazine",
    cart: "Coș",
    language: "Limba",
  }}
  theme={{
    navbarBg: "bg-black",
    navbarText: "text-white",
    overlayBg: "bg-neutral-950/90",
    overlayText: "text-white",
    surfaceBg: "bg-white",
    surfaceText: "text-black",
    hoverHighlight: "hover:bg-black/5",
    borderColor: "border-white/20",
  }}
  features={{
    search: true,
    language: true,
    cta: true,
    cart: true,
    storeLocator: true,
  }}
  topLinks={[
    { label: "Products", href: "/products" },
    { label: "Pricing", href: "/pricing" },
    { label: "Docs", href: "/docs" },
  ]}
  overlayLinks={[
    { label: "Home", href: "/" },
    { label: "Products", href: "/products" },
    { label: "About", href: "/about" },
    { label: "Store Locator", href: "/store-locator" },
  ]}
  searchItems={[
    { id: 1, label: "Product 1", href: "/products/1", image: "/globe.svg" },
    { id: 2, label: "Product 2", href: "/products/2", image: "/globe.svg" },
    { id: 3, label: "Product 3", href: "/products/3", image: "/globe.svg" },
  ]}
  ctaLabel="Try free"
  ctaHref="/signup"
  ctaColorClass="bg-blue-600 hover:bg-blue-700"
/>
Tip: poți face varianta „transparentă” pentru navbars adăugând clasa bg-transparent pe <header> și un gradient pe secțiunea de hero.