Navbar

/* Componente: Navbar */
/* Categoría: layout · Librería: shadcn · Versión: 1.0.0 */
/* Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection. */
/* Importar: npx webmcpcss components import shadcn-navbar */

/* shadcn/ui: NavigationMenu + Button; pasa data-tool como prop. */
/* Contrato WebMCP */
nav[data-component="navbar"] [data-tool="goHome"] {
  webmcp-tool: "goHome";
  webmcp-description: "Vuelve a la página de inicio";
  webmcp-intent: "navigate";
  webmcp-confirmation: "none";
  webmcp-permissions: "read-only";
}
nav[data-component="navbar"] [data-tool="openMenu"] {
  webmcp-tool: "openMenu";
  webmcp-description: "Abre o cierra el menú de navegación (móvil)";
  webmcp-intent: "action";
  webmcp-confirmation: "none";
  webmcp-permissions: "read-only";
  webmcp-accessibility: "aria-expanded: reflejar estado; aria-controls: menú";
}
nav[data-component="navbar"] [data-tool="signUp"] {
  webmcp-tool: "signUp";
  webmcp-description: "Abre el registro de cuenta (llamada a la acción de la barra)";
  webmcp-intent: "navigate";
  webmcp-confirmation: "none";
  webmcp-permissions: "read-only";
}
nav[data-component="navbar"] [aria-current="page"] { webmcp-context: "activeSection"; webmcp-format: "text"; }

<nav data-component="navbar" aria-label="Principal" class="flex flex-wrap items-center gap-4 rounded-xl border bg-card px-5 py-3 text-card-foreground shadow-sm">
  <a data-tool="goHome" href="#/" class="mr-auto text-lg font-extrabold">◆ Marca</a>
  <button data-slot="button" data-variant="ghost" data-tool="openMenu" type="button" aria-expanded="false" aria-controls="sh-nav-menu" aria-label="Abrir menú" class="inline-flex size-9 items-center justify-center rounded-md hover:bg-accent sm:hidden" onclick="const o=this.getAttribute('aria-expanded')==='true';this.setAttribute('aria-expanded',String(!o));document.getElementById('sh-nav-menu').classList.toggle('hidden',o)"><svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg></button>
  <ul id="sh-nav-menu" data-slot="navigation-menu-list" class="hidden w-full flex-col gap-1 sm:flex sm:w-auto sm:flex-row">
    <li><a data-slot="navigation-menu-link" href="#inicio" aria-current="page" class="block rounded-md px-3 py-2 text-sm font-medium hover:bg-accent aria-[current=page]:bg-accent">Inicio</a></li>
    <li><a data-slot="navigation-menu-link" href="#componentes" class="block rounded-md px-3 py-2 text-sm font-medium hover:bg-accent aria-[current=page]:bg-accent">Componentes</a></li>
    <li><a data-slot="navigation-menu-link" href="#docs" class="block rounded-md px-3 py-2 text-sm font-medium hover:bg-accent aria-[current=page]:bg-accent">Docs</a></li>
  </ul>
  <a data-slot="button" data-tool="signUp" href="#registro" class="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-sm hover:opacity-90">Crear cuenta</a>
</nav>

<nav data-component="navbar" aria-label="Principal" className="flex items-center gap-4 rounded-xl border bg-card px-5 py-3">
  <a href="/" data-tool="goHome" className="mr-auto font-extrabold">◆ Marca</a>
  <Button variant="ghost" size="icon" className="sm:hidden" data-tool="openMenu" aria-label="Abrir menú" onClick={toggle}><Menu /></Button>
  <NavigationMenu>
    <NavigationMenuList>
      {links.map((l) => <NavigationMenuItem key={l.href}><NavigationMenuLink href={l.href} aria-current={l.active ? "page" : undefined}>{l.label}</NavigationMenuLink></NavigationMenuItem>)}
    </NavigationMenuList>
  </NavigationMenu>
  <Button asChild data-tool="signUp"><a href="/registro">Crear cuenta</a></Button>
</nav>

{
  "id": "shadcn-navbar",
  "name": "Navbar",
  "category": "layout",
  "library": "shadcn",
  "version": "1.0.0",
  "description": "Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection.",
  "author": "WebMCPcss Team",
  "tags": [
    "layout",
    "navigation",
    "navbar",
    "header",
    "shadcn"
  ],
  "controls": [
    {
      "variable": "--primary",
      "label": "Color primario",
      "type": "color",
      "default": "#18181b"
    },
    {
      "variable": "--primary-foreground",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#fafafa"
    },
    {
      "variable": "--radius",
      "label": "Radio",
      "type": "range",
      "default": "0.625rem",
      "min": 0,
      "max": 1.5,
      "step": 0.125,
      "unit": "rem"
    }
  ],
  "promptExamples": [
    "añade un enlace “Precios” a la barra de navegación",
    "cambia el color de fondo de la navbar"
  ],
  "animateExamples": [
    "haz que la navbar aparezca deslizándose desde arriba",
    "añade fade-in a los enlaces del menú"
  ],
  "related": [
    "core-navbar",
    "tailwind-navbar",
    "bootstrap-navbar",
    "mui-navbar"
  ],
  "usage": {
    "framework": "react",
    "code": "<nav data-component=\"navbar\" aria-label=\"Principal\" className=\"flex items-center gap-4 rounded-xl border bg-card px-5 py-3\">\n  <a href=\"/\" data-tool=\"goHome\" className=\"mr-auto font-extrabold\">◆ Marca</a>\n  <Button variant=\"ghost\" size=\"icon\" className=\"sm:hidden\" data-tool=\"openMenu\" aria-label=\"Abrir menú\" onClick={toggle}><Menu /></Button>\n  <NavigationMenu>\n    <NavigationMenuList>\n      {links.map((l) => <NavigationMenuItem key={l.href}><NavigationMenuLink href={l.href} aria-current={l.active ? \"page\" : undefined}>{l.label}</NavigationMenuLink></NavigationMenuItem>)}\n    </NavigationMenuList>\n  </NavigationMenu>\n  <Button asChild data-tool=\"signUp\"><a href=\"/registro\">Crear cuenta</a></Button>\n</nav>"
  },
  "preview": "preview.css",
  "css": "navbar.webmcp.css",
  "html": "navbar.html"
}