Cuando navegas por un sitio web y notas que el botón del menú correspondiente a la página actual se resalta automáticamente, hay una lógica de servidor detrás. Con PHP y la variable superglobal $_SERVER puedes detectar la URL activa y cambiar las clases CSS del menú sin recargar lógica extra. Esta guía es para quienes ya construyen interfaces con HTML, Tailwind y PHP y quieren mejorar la experiencia de navegación.

¿Qué información entrega $_SERVER en PHP?

La variable $_SERVER es un array asociativo que PHP genera automáticamente con datos del entorno de ejecución. Al imprimirla dentro de una etiqueta <pre> puedes leerla con un formato más limpio y entender qué tienes disponible.

Entre los datos que aparecen están:

• El usuario y la carpeta donde se aloja el proyecto.
• El archivo que estás ejecutando en ese momento.
• El estatus HTTP recibido y el puerto en uso.
• La URI solicitada por el navegador.

¿Qué es $_SERVER en PHP? Es una variable superglobal que contiene información del servidor y del entorno de ejecución, como rutas, encabezados y la URL solicitada por el cliente.

No necesitas memorizar todas las claves del array, salvo que apuntes a una certificación. Lo importante ahora es identificar la pieza que cambia con cada navegación.

¿Qué es REQUEST_URI y por qué importa?

Dentro de $_SERVER, la clave REQUEST_URI guarda lo que viene después del dominio. Si tu sitio es midominio.com y entras a /publicaciones.php, el valor de REQUEST_URI será justamente /publicaciones.php. Eso es lo que cambia cuando saltas de una sección a otra.

Para verlo en acción puedes imprimirlo así:

php

<?php echo $_SERVER['REQUEST_URI']; ?>

Cada clic actualiza el valor, y ese cambio constante es justo lo que necesitas para construir la condición que activa el botón correcto del menú [01:32].

¿Para qué sirve REQUEST_URI? Sirve para conocer la ruta exacta que el usuario está visitando, sin incluir el dominio. Es la clave para aplicar lógica condicional según la página activa.

¿Cómo aplicar una condicional para cambiar las clases CSS?

Antes de escribir la condición, revisa tu CSS. En este caso, el botón activo y el botón inactivo usan distintas clases de Tailwind. Identifica ambas, porque serán los dos resultados posibles de tu condicional.

La estructura básica es la siguiente: si REQUEST_URI coincide con la ruta del enlace, imprime las clases activas; si no, imprime las inactivas. Por ejemplo, para el enlace de inicio:

php <a class="<?php echo ($_SERVER['REQUEST_URI'] == '/') ? 'clases-activas' : 'clases-inactivas'; ?>" href="/">Inicio</a>

El operador ternario (? :) actúa como un if/else compacto. Si la condición es verdadera, se imprime el primer bloque; si es falsa, el segundo.

¿Cómo replicar la lógica en cada enlace del menú?

El error común es dejar la misma ruta / en todos los enlaces. Si haces eso, todos los botones se activan al mismo tiempo en el inicio y se apagan en cualquier otra página. Lo correcto es ajustar la ruta comparada en cada enlace según el archivo que representa.

Por ejemplo:

• En el botón de inicio compara contra '/'.
• En publicaciones compara contra '/post.php'.
• En about compara contra '/about.php'.
• En enlaces compara contra '/enlaces.php'.

Con ese ajuste, cada botón evalúa su propia ruta y solo se activa el que corresponde a la página visitada [04:18].

¿Cómo organizar el código para leerlo mejor?

Una condicional ternaria puede vivir en una sola línea, pero cuando crece se vuelve difícil de leer. Una buena práctica es separar visualmente la condición, el caso verdadero y el caso falso en líneas distintas, alineadas e indentadas.

Esto te permite escanear con la mirada qué clases entran en cada escenario y detectar errores rápido. Una vez tienes dominada la estructura, puedes volver a colapsarla en una línea sin perder claridad.

¿Qué consigues al conectar la lógica del servidor con el diseño?

Acabas de unir dos capas que muchas veces se trabajan por separado: la lógica de PHP en el servidor y el sistema de clases CSS de Tailwind en el frontend. El menú ahora responde al contexto del usuario y le indica con claridad en qué sección se encuentra.

Este patrón es la base para construir interfaces administrativas más sofisticadas, donde la navegación, los permisos y la seguridad se definen desde el servidor. ¿Qué otros elementos de tu interfaz mejorarías con esta misma técnica? Cuéntame en los comentarios.