{ "component_name": "navbar", "version": "2.0.0", "description": "Menú de navegación principal de WordPress con soporte Bootstrap 5", "groups": { "visibility": { "label": "Activación y Visibilidad", "priority": 10, "fields": { "is_enabled": { "type": "boolean", "label": "Activar Navbar", "default": true, "editable": true, "required": true, "description": "Activa o desactiva el menú de navegación" }, "show_on_mobile": { "type": "boolean", "label": "Mostrar en Mobile", "default": true, "editable": true, "description": "Muestra el menú en dispositivos móviles (<768px)" }, "show_on_desktop": { "type": "boolean", "label": "Mostrar en Desktop", "default": true, "editable": true, "description": "Muestra el menú en dispositivos de escritorio (≥768px)" }, "show_on_pages": { "type": "select", "label": "Mostrar en", "default": "all", "editable": true, "options": { "all": "Todas las páginas", "home": "Solo página de inicio", "posts": "Solo posts individuales", "pages": "Solo páginas" }, "description": "Define en qué páginas se muestra el navbar" }, "sticky_enabled": { "type": "boolean", "label": "Navbar fijo (sticky)", "default": true, "editable": true, "description": "Mantiene el navbar fijo en la parte superior al hacer scroll" }, "is_critical": { "type": "boolean", "label": "CSS Crítico", "default": true, "editable": true, "description": "Inyectar CSS inline en para optimizar LCP (componente above-the-fold)" } } }, "layout": { "label": "Layout y Estructura", "priority": 20, "fields": { "container_type": { "type": "select", "label": "Tipo de contenedor", "default": "container", "editable": true, "options": { "container": "Container (ancho fijo)", "container-fluid": "Container Fluid (ancho completo)" }, "description": "Define el tipo de contenedor Bootstrap" }, "padding_vertical": { "type": "text", "label": "Padding vertical", "default": "0.75rem 0", "editable": true, "description": "Espaciado vertical del navbar (ej: 0.75rem 0)" }, "z_index": { "type": "text", "label": "Z-index", "default": "1030", "editable": true, "description": "Prioridad de capa (mayor número = más arriba, ej: 1030)" } } }, "behavior": { "label": "Configuración del Menú", "priority": 30, "fields": { "menu_location": { "type": "select", "label": "Ubicación del menú", "default": "primary", "editable": true, "options": { "primary": "Menú Principal", "secondary": "Menú Secundario", "custom": "Menú personalizado" }, "required": true, "description": "Selecciona qué menú de WordPress mostrar" }, "custom_menu_id": { "type": "text", "label": "ID del menú personalizado", "default": "0", "editable": true, "conditional_logic": { "field": "menu_location", "operator": "==", "value": "custom" }, "description": "ID del menú personalizado de WordPress" }, "enable_dropdowns": { "type": "boolean", "label": "Habilitar submenús desplegables", "default": true, "editable": true, "description": "Permite submenús desplegables (depth 2)" }, "mobile_breakpoint": { "type": "select", "label": "Breakpoint para menú móvil", "default": "lg", "editable": true, "options": { "sm": "Small (576px)", "md": "Medium (768px)", "lg": "Large (992px)", "xl": "Extra Large (1200px)" }, "description": "Punto de quiebre para mostrar menú hamburguesa" } } }, "media": { "label": "Logo/Marca", "priority": 40, "fields": { "show_brand": { "type": "boolean", "label": "Mostrar logo/marca", "default": false, "editable": true, "description": "Muestra el logo o nombre de la marca en el navbar" }, "use_logo": { "type": "boolean", "label": "Usar logo (imagen)", "default": false, "editable": true, "conditional_logic": { "field": "show_brand", "operator": "==", "value": true }, "description": "Usa una imagen como logo en lugar de texto" }, "logo_url": { "type": "text", "label": "URL del logo", "default": "", "editable": true, "conditional_logic": { "field": "use_logo", "operator": "==", "value": true }, "description": "URL completa de la imagen del logo" }, "logo_height": { "type": "text", "label": "Altura del logo", "default": "40px", "editable": true, "conditional_logic": { "field": "use_logo", "operator": "==", "value": true }, "description": "Altura del logo (ej: 40px, 2.5rem)" }, "brand_text": { "type": "text", "label": "Texto de la marca", "default": "APU's México", "editable": true, "maxlength": 50, "conditional_logic": { "field": "show_brand", "operator": "==", "value": true }, "description": "Texto que se muestra como marca (si no hay logo)" }, "brand_font_size": { "type": "text", "label": "Tamaño de fuente", "default": "1.5rem", "editable": true, "conditional_logic": { "field": "show_brand", "operator": "==", "value": true }, "description": "Tamaño de fuente de la marca (ej: 1.5rem, 24px)" }, "brand_color": { "type": "color", "label": "Color de la marca", "default": "#FFFFFF", "editable": true, "conditional_logic": { "field": "show_brand", "operator": "==", "value": true }, "description": "Color del texto de la marca" }, "brand_hover_color": { "type": "color", "label": "Color hover de la marca", "default": "#FF8600", "editable": true, "conditional_logic": { "field": "show_brand", "operator": "==", "value": true }, "description": "Color al pasar el mouse sobre la marca" } } }, "links": { "label": "Estilos de Enlaces", "priority": 50, "fields": { "text_color": { "type": "color", "label": "Color del texto", "default": "#FFFFFF", "editable": true, "description": "Color del texto de los links del menú" }, "hover_color": { "type": "color", "label": "Color hover", "default": "#FF8600", "editable": true, "description": "Color al pasar el mouse sobre los links" }, "active_color": { "type": "color", "label": "Color del item activo", "default": "#FF8600", "editable": true, "description": "Color del item de menú activo/actual" }, "font_size": { "type": "text", "label": "Tamaño de fuente", "default": "0.9rem", "editable": true, "description": "Tamaño de fuente de los enlaces (ej: 0.9rem, 14px)" }, "font_weight": { "type": "text", "label": "Grosor de fuente", "default": "500", "editable": true, "description": "Grosor de la fuente (100-900, ej: 500)" }, "padding": { "type": "text", "label": "Padding de enlaces", "default": "0.5rem 0.65rem", "editable": true, "description": "Espaciado interno de los enlaces (ej: 0.5rem 0.65rem)" }, "border_radius": { "type": "text", "label": "Border radius hover", "default": "4px", "editable": true, "description": "Radio de borde al pasar el mouse (ej: 4px)" }, "show_underline_effect": { "type": "boolean", "label": "Mostrar efecto de subrayado", "default": true, "editable": true, "description": "Muestra una línea animada debajo del enlace al hover" }, "underline_color": { "type": "color", "label": "Color del subrayado", "default": "#FF8600", "editable": true, "conditional_logic": { "field": "show_underline_effect", "operator": "==", "value": true }, "description": "Color de la línea de subrayado" } } }, "visual_effects": { "label": "Estilos de Dropdown", "priority": 60, "fields": { "background_color": { "type": "color", "label": "Fondo de dropdown", "default": "#FFFFFF", "editable": true, "description": "Color de fondo de los submenús desplegables" }, "border_radius": { "type": "text", "label": "Border radius", "default": "8px", "editable": true, "description": "Radio de borde del dropdown (ej: 8px)" }, "shadow": { "type": "text", "label": "Sombra del dropdown", "default": "0 8px 24px rgba(0, 0, 0, 0.12)", "editable": true, "description": "Sombra CSS del dropdown" }, "item_color": { "type": "color", "label": "Color de items", "default": "#495057", "editable": true, "description": "Color del texto de los items del dropdown" }, "item_hover_background": { "type": "color", "label": "Fondo hover de items", "default": "rgba(255, 133, 0, 0.1)", "editable": true, "description": "Color de fondo al pasar el mouse sobre items" }, "item_padding": { "type": "text", "label": "Padding de items", "default": "0.625rem 1.25rem", "editable": true, "description": "Espaciado interno de items del dropdown" }, "dropdown_max_height": { "type": "text", "label": "Altura máxima del dropdown", "default": "500px", "editable": true, "description": "Altura máxima del submenú. Si se excede, aparece scroll (ej: 300px, 20rem)" } } }, "colors": { "label": "Estilos del Navbar", "priority": 70, "fields": { "background_color": { "type": "color", "label": "Color de fondo", "default": "#1e3a5f", "editable": true, "description": "Color de fondo del navbar" }, "box_shadow": { "type": "text", "label": "Sombra del navbar", "default": "0 4px 12px rgba(30, 58, 95, 0.15)", "editable": true, "description": "Sombra CSS del navbar" } } } } }