libreria-astro-lefebvre/src/carbins/Cabecera_2026_Madrid.ts

Librería de componentes Astro, React y Vue para Lefebvre

import type { ComponentMetadata } from '../interfaces/types';

export const metadata: ComponentMetadata = {
  component_name: 'Cabecera_2026_Madrid',
  category: 'Header',
  name: 'Cabecera sticky con menú configurable y subcategorías 2026',
  description: 'Cabecera fija (sticky top-0) con logo de Lefebvre, botón CTA y menú horizontal completamente configurable vía prop "categories". Cada ítem admite target (_self o _blank) y una lista opcional de subcategorías en dropdown al hacer hover. Si no se pasa menú custom, cae en un menú por defecto. Incluye hamburguesa en móvil y structured data schema.org (SiteNavigationElement raíz con la jerarquía del menú)',
  framework: 'Astro',
  priority: 1,
  tags: ['header', 'cabecera', 'navegacion', 'sticky', 'menu', 'cta', 'configurable'],
   fields: [
     {
      name: 'label',
      type: 'text',
      help: 'Texto del botón CTA principal que aparece en la esquina superior derecha de la cabecera',
      label: 'Texto del botón CTA',
      mandatory: false,
      example_value: 'Pruébalo ya'
    },
     {
      name: 'subdirectory',
      type: 'text',
      help: 'Ruta base del sitio (p. ej. "/genia-l"). Se concatena al enlace del logo y a las rutas del menú por defecto, y se usa en la URL del structured data SEO. Si se pasa un menú custom en "categories", este valor NO se aplica a esos enlaces — debes incluir la ruta completa en cada ítem',
      label: 'Subdirectorio',
      mandatory: false,
      example_value: '/genia-l'
    },
    {
      name: 'url',
      type: 'text',
      help: 'URL de destino del botón CTA. Por defecto "#"',
      label: 'Enlace del botón CTA',
      mandatory: false,
      example_value: '/genia-l/pruebalo'
    },
    {
      name: 'loading',
      type: 'select',
      help: 'Tipo de carga del logo de la cabecera. Usa "eager" si el logo está above the fold (recomendado en páginas con cabecera visible al cargar); "lazy" si el componente se renderiza fuera del viewport inicial',
      label: 'Carga del logo',
      options: ['lazy', 'eager'],
      options_labels: ['Diferida', 'Inmediata'],
      example_value: 'eager'
    },
    {
      name: 'categories',
      type: 'list',
      help: 'Ítems del menú principal de navegación. Si se deja vacío o no se pasa, se muestra el menú por defecto (Cómo funciona, Seguridad, Casos reales, Contacto, Blog). Si defines este listado, debes incluir la ruta completa en cada "link" — el campo "subdirectory" NO se concatena',
      label: 'Ítems del menú (opcional)',
      mandatory: false,
      items: {
        type: 'object',
        fields: [
          { name: 'name',   type: 'text',   help: 'Texto visible del ítem del menú principal', label: 'Texto del ítem', example_value: 'Cómo funciona' },
          { name: 'link',   type: 'text',   help: 'URL de destino del ítem. Debe ser la ruta completa (no se le concatena "subdirectory")', label: 'URL del ítem', example_value: '/genia-l/conoce-genia-l/' },
          { name: 'target', type: 'select', help: 'Cómo se abre el enlace: "_self" en la misma pestaña, "_blank" en una pestaña nueva', label: 'Apertura del enlace', options: ['_self', '_blank'], options_labels: ['Misma pestaña', 'Nueva pestaña'], example_value: '_self' },
        ]
      }
    },
    {
      name: 'siteUrl',
      type: 'text',
      help: 'Origen público del sitio (protocolo + host, sin barra final, p. ej. "https://lefebvre.es"). Se usa para la URL del SiteNavigationElement en el structured data SEO. Necesario en SSR tras un proxy, donde Astro.url resuelve al host interno (localhost). Si se deja vacío, se usa Astro.site o el host de la petición',
      label: 'URL del sitio',
      mandatory: false,
      example_value: ''
    }
   ]
};