Navbar

/* Componente: Navbar */
/* Categoría: layout · Librería: bootstrap · 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 bootstrap-navbar */

/* Bootstrap 5.3: .navbar en el HTML (el colapso usa bootstrap.bundle.js); este archivo es el contrato para agentes. */
/* Contrato WebMCP */
.navbar[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";
}
.navbar[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ú";
}
.navbar[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";
}
.navbar[data-component="navbar"] [aria-current="page"] { webmcp-context: "activeSection"; webmcp-format: "text"; }

<nav class="navbar navbar-expand-sm bg-body-tertiary rounded shadow-sm px-3" data-component="navbar" aria-label="Principal">
  <a class="navbar-brand fw-bold" data-tool="goHome" href="#/">◆ Marca</a>
  <button class="navbar-toggler" type="button" data-tool="openMenu" data-bs-toggle="collapse" data-bs-target="#bs-nav-menu" aria-controls="bs-nav-menu" aria-expanded="false" aria-label="Abrir menú"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="bs-nav-menu">
    <ul class="navbar-nav me-auto mb-2 mb-sm-0">
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#inicio">Inicio</a></li>
      <li class="nav-item"><a class="nav-link" href="#componentes">Componentes</a></li>
      <li class="nav-item"><a class="nav-link" href="#docs">Docs</a></li>
    </ul>
    <a class="btn btn-primary" data-tool="signUp" href="#registro">Crear cuenta</a>
  </div>
</nav>

{
  "id": "bootstrap-navbar",
  "name": "Navbar",
  "category": "layout",
  "library": "bootstrap",
  "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",
    "bootstrap"
  ],
  "controls": [
    {
      "variable": "--wm-primary",
      "label": "Color primario",
      "type": "color",
      "default": "#0d6efd"
    },
    {
      "variable": "--wm-radius",
      "label": "Radio",
      "type": "range",
      "default": ".375rem",
      "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",
    "mui-navbar",
    "shadcn-navbar"
  ],
  "preview": "preview.css",
  "css": "navbar.webmcp.css",
  "html": "navbar.html"
}