Navbar

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

/* Material UI: el HTML es el DOM que renderiza <AppBar><Toolbar>…; pasa data-tool como prop. */
/* Contrato WebMCP */
.MuiAppBar-root[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";
}
.MuiAppBar-root[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ú";
}
.MuiAppBar-root[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";
}
.MuiAppBar-root[data-component="navbar"] [aria-current="page"] { webmcp-context: "activeSection"; webmcp-format: "text"; }

<header class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic" data-component="navbar">
  <div class="MuiToolbar-root">
    <button class="MuiButtonBase-root MuiIconButton-root" type="button" data-tool="openMenu" aria-label="Abrir menú" aria-expanded="false"><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>
    <h6 class="MuiTypography-root MuiTypography-h6"><a data-tool="goHome" href="#/" style="color:inherit;text-decoration:none">◆ Marca</a></h6>
    <a class="MuiButtonBase-root MuiButton-root MuiButton-text" href="#inicio" aria-current="page">Inicio</a>
    <a class="MuiButtonBase-root MuiButton-root MuiButton-text" href="#componentes">Componentes</a>
    <a class="MuiButtonBase-root MuiButton-root MuiButton-text" href="#docs">Docs</a>
    <a class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary" data-tool="signUp" href="#registro">Crear cuenta</a>
  </div>
</header>

<AppBar position="static" data-component="navbar">
  <Toolbar>
    <IconButton edge="start" color="inherit" aria-label="Abrir menú" data-tool="openMenu" onClick={toggleDrawer}><MenuIcon /></IconButton>
    <Typography variant="h6" sx={{ flexGrow: 1 }}><Link href="/" color="inherit" underline="none" data-tool="goHome">◆ Marca</Link></Typography>
    {links.map((l) => <Button key={l.href} color="inherit" href={l.href} aria-current={l.active ? "page" : undefined}>{l.label}</Button>)}
    <Button variant="contained" color="inherit" href="/registro" data-tool="signUp">Crear cuenta</Button>
  </Toolbar>
</AppBar>

{
  "id": "mui-navbar",
  "name": "Navbar",
  "category": "layout",
  "library": "mui",
  "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",
    "mui"
  ],
  "controls": [
    {
      "variable": "--wm-primary",
      "label": "Color primario",
      "type": "color",
      "default": "#1976d2"
    },
    {
      "variable": "--wm-on-primary",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#ffffff"
    },
    {
      "variable": "--wm-radius",
      "label": "Radio",
      "type": "range",
      "default": "4px",
      "min": 0,
      "max": 24,
      "step": 1,
      "unit": "px"
    }
  ],
  "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",
    "shadcn-navbar"
  ],
  "usage": {
    "framework": "react",
    "code": "<AppBar position=\"static\" data-component=\"navbar\">\n  <Toolbar>\n    <IconButton edge=\"start\" color=\"inherit\" aria-label=\"Abrir menú\" data-tool=\"openMenu\" onClick={toggleDrawer}><MenuIcon /></IconButton>\n    <Typography variant=\"h6\" sx={{ flexGrow: 1 }}><Link href=\"/\" color=\"inherit\" underline=\"none\" data-tool=\"goHome\">◆ Marca</Link></Typography>\n    {links.map((l) => <Button key={l.href} color=\"inherit\" href={l.href} aria-current={l.active ? \"page\" : undefined}>{l.label}</Button>)}\n    <Button variant=\"contained\" color=\"inherit\" href=\"/registro\" data-tool=\"signUp\">Crear cuenta</Button>\n  </Toolbar>\n</AppBar>"
  },
  "preview": "preview.css",
  "css": "navbar.webmcp.css",
  "html": "navbar.html"
}