diff --git a/admin-panel/admin/assets/js/component-navbar.js b/admin-panel/admin/assets/js/component-navbar.js
new file mode 100644
index 00000000..05a148dd
--- /dev/null
+++ b/admin-panel/admin/assets/js/component-navbar.js
@@ -0,0 +1,160 @@
+/**
+ * Navbar Component - JavaScript Controller
+ *
+ * @package Apus_Theme
+ * @since 2.0.0
+ */
+
+window.NavbarComponent = {
+	/**
+	 * Inicialización del componente
+	 */
+	init: function() {
+		console.log('Navbar component initialized');
+		// Aquí van event listeners específicos si se necesitan
+		// Por ejemplo: actualizar preview en tiempo real
+	},
+
+	/**
+	 * Recolectar datos del formulario
+	 * @returns {Object} Configuración del navbar
+	 */
+	collect: function() {
+		return {
+			// Grupo 1: Activación y Visibilidad
+			enabled: document.getElementById('navbarEnabled').checked,
+			show_on_mobile: document.getElementById('navbarShowOnMobile').checked,
+			show_on_desktop: document.getElementById('navbarShowOnDesktop').checked,
+			position: document.getElementById('navbarPosition').value,
+			responsive_breakpoint: document.getElementById('navbarBreakpoint').value,
+
+			// Grupo 4: Efectos (booleans)
+			enable_box_shadow: document.getElementById('navbarEnableBoxShadow').checked,
+			enable_underline_effect: document.getElementById('navbarEnableUnderlineEffect').checked,
+			enable_hover_background: document.getElementById('navbarEnableHoverBackground').checked,
+
+			// Grupo 6: Let's Talk Button
+			lets_talk_button: {
+				enabled: document.getElementById('navbarLetsTalkEnabled').checked,
+				text: document.getElementById('navbarLetsTalkText').value.trim(),
+				icon_class: document.getElementById('navbarLetsTalkIconClass').value.trim(),
+				show_icon: document.getElementById('navbarLetsTalkShowIcon').checked,
+				position: document.getElementById('navbarLetsTalkPosition').value
+			},
+
+			// Grupo 7: Dropdown
+			dropdown: {
+				enable_hover_desktop: document.getElementById('navbarDropdownEnableHoverDesktop').checked,
+				max_height: parseInt(document.getElementById('navbarDropdownMaxHeight').value) || 70,
+				border_radius: parseInt(document.getElementById('navbarDropdownBorderRadius').value) || 8,
+				item_padding_vertical: parseFloat(document.getElementById('navbarDropdownItemPaddingVertical').value) || 0.5,
+				item_padding_horizontal: parseFloat(document.getElementById('navbarDropdownItemPaddingHorizontal').value) || 1.25
+			},
+
+			// Grupos 2, 3, 5: Custom Styles
+			custom_styles: {
+				// Grupo 2: Colores
+				background_color: document.getElementById('navbarBgColor').value || '#1e3a5f',
+				text_color: document.getElementById('navbarTextColor').value || '#ffffff',
+				link_hover_color: document.getElementById('navbarLinkHoverColor').value || '#FF8600',
+				link_hover_bg_color: document.getElementById('navbarLinkHoverBgColor').value || '#FF8600',
+				dropdown_bg_color: document.getElementById('navbarDropdownBgColor').value || '#ffffff',
+				dropdown_item_color: document.getElementById('navbarDropdownItemColor').value || '#4A5568',
+				dropdown_item_hover_color: document.getElementById('navbarDropdownItemHoverColor').value || '#FF8600',
+
+				// Grupo 3: Tipografía
+				font_size: document.getElementById('navbarFontSize').value,
+				font_weight: document.getElementById('navbarFontWeight').value,
+
+				// Grupo 4: Efectos
+				box_shadow_intensity: document.getElementById('navbarBoxShadowIntensity').value,
+				border_radius: parseInt(document.getElementById('navbarBorderRadius').value) || 4,
+
+				// Grupo 5: Spacing
+				padding_vertical: parseFloat(document.getElementById('navbarPaddingVertical').value) || 0.75,
+				link_padding_vertical: parseFloat(document.getElementById('navbarLinkPaddingVertical').value) || 0.5,
+				link_padding_horizontal: parseFloat(document.getElementById('navbarLinkPaddingHorizontal').value) || 0.65,
+
+				// Grupo 8: Avanzado
+				z_index: parseInt(document.getElementById('navbarZIndex').value) || 1030,
+				transition_speed: document.getElementById('navbarTransitionSpeed').value || 'normal'
+			}
+		};
+	},
+
+	/**
+	 * Renderizar configuración en el formulario
+	 * @param {Object} config - Configuración del navbar
+	 */
+	render: function(config) {
+		if (!config) {
+			console.warn('No navbar config provided');
+			return;
+		}
+
+		// Grupo 1: Activación y Visibilidad
+		document.getElementById('navbarEnabled').checked = config.enabled !== undefined ? config.enabled : true;
+		document.getElementById('navbarShowOnMobile').checked = config.show_on_mobile !== undefined ? config.show_on_mobile : true;
+		document.getElementById('navbarShowOnDesktop').checked = config.show_on_desktop !== undefined ? config.show_on_desktop : true;
+		document.getElementById('navbarPosition').value = config.position || 'sticky';
+		document.getElementById('navbarBreakpoint').value = config.responsive_breakpoint || 'lg';
+
+		// Grupo 2: Colores Personalizados
+		if (config.custom_styles) {
+			document.getElementById('navbarBgColor').value = config.custom_styles.background_color || '#1e3a5f';
+			document.getElementById('navbarTextColor').value = config.custom_styles.text_color || '#ffffff';
+			document.getElementById('navbarLinkHoverColor').value = config.custom_styles.link_hover_color || '#FF8600';
+			document.getElementById('navbarLinkHoverBgColor').value = config.custom_styles.link_hover_bg_color || '#FF8600';
+			document.getElementById('navbarDropdownBgColor').value = config.custom_styles.dropdown_bg_color || '#ffffff';
+			document.getElementById('navbarDropdownItemColor').value = config.custom_styles.dropdown_item_color || '#4A5568';
+			document.getElementById('navbarDropdownItemHoverColor').value = config.custom_styles.dropdown_item_hover_color || '#FF8600';
+		}
+
+		// Grupo 3: Tipografía
+		if (config.custom_styles) {
+			document.getElementById('navbarFontSize').value = config.custom_styles.font_size || 'normal';
+			document.getElementById('navbarFontWeight').value = config.custom_styles.font_weight || '500';
+		}
+
+		// Grupo 4: Efectos Visuales
+		document.getElementById('navbarEnableBoxShadow').checked = config.enable_box_shadow !== undefined ? config.enable_box_shadow : true;
+		document.getElementById('navbarEnableUnderlineEffect').checked = config.enable_underline_effect !== undefined ? config.enable_underline_effect : true;
+		document.getElementById('navbarEnableHoverBackground').checked = config.enable_hover_background !== undefined ? config.enable_hover_background : true;
+
+		if (config.custom_styles) {
+			document.getElementById('navbarBoxShadowIntensity').value = config.custom_styles.box_shadow_intensity || 'normal';
+			document.getElementById('navbarBorderRadius').value = config.custom_styles.border_radius !== undefined ? config.custom_styles.border_radius : 4;
+		}
+
+		// Grupo 5: Spacing
+		if (config.custom_styles) {
+			document.getElementById('navbarPaddingVertical').value = config.custom_styles.padding_vertical !== undefined ? config.custom_styles.padding_vertical : 0.75;
+			document.getElementById('navbarLinkPaddingVertical').value = config.custom_styles.link_padding_vertical !== undefined ? config.custom_styles.link_padding_vertical : 0.5;
+			document.getElementById('navbarLinkPaddingHorizontal').value = config.custom_styles.link_padding_horizontal !== undefined ? config.custom_styles.link_padding_horizontal : 0.65;
+		}
+
+		// Grupo 8: Avanzado
+		if (config.custom_styles) {
+			document.getElementById('navbarZIndex').value = config.custom_styles.z_index !== undefined ? config.custom_styles.z_index : 1030;
+			document.getElementById('navbarTransitionSpeed').value = config.custom_styles.transition_speed || 'normal';
+		}
+
+		// Grupo 6: Let's Talk Button
+		if (config.lets_talk_button) {
+			document.getElementById('navbarLetsTalkEnabled').checked = config.lets_talk_button.enabled !== undefined ? config.lets_talk_button.enabled : true;
+			document.getElementById('navbarLetsTalkText').value = config.lets_talk_button.text || "Let's Talk";
+			document.getElementById('navbarLetsTalkIconClass').value = config.lets_talk_button.icon_class || 'bi bi-lightning-charge-fill';
+			document.getElementById('navbarLetsTalkShowIcon').checked = config.lets_talk_button.show_icon !== undefined ? config.lets_talk_button.show_icon : true;
+			document.getElementById('navbarLetsTalkPosition').value = config.lets_talk_button.position || 'right';
+		}
+
+		// Grupo 7: Dropdown
+		if (config.dropdown) {
+			document.getElementById('navbarDropdownEnableHoverDesktop').checked = config.dropdown.enable_hover_desktop !== undefined ? config.dropdown.enable_hover_desktop : true;
+			document.getElementById('navbarDropdownMaxHeight').value = config.dropdown.max_height !== undefined ? config.dropdown.max_height : 70;
+			document.getElementById('navbarDropdownBorderRadius').value = config.dropdown.border_radius !== undefined ? config.dropdown.border_radius : 8;
+			document.getElementById('navbarDropdownItemPaddingVertical').value = config.dropdown.item_padding_vertical !== undefined ? config.dropdown.item_padding_vertical : 0.5;
+			document.getElementById('navbarDropdownItemPaddingHorizontal').value = config.dropdown.item_padding_horizontal !== undefined ? config.dropdown.item_padding_horizontal : 1.25;
+		}
+	}
+};