Cómo destacar el elemento de menú activo de una web con PHP

Cuando estás creando tu primera web, una de las cosas que deberás trabajar es la experiencia de navegación. Cuando un usuario navegue por las secciones es útil indicarle de algún modo dónde se encuentra. Tradicionalmente se han empleado migas de pan, pero también hay otra opción a considerar. Y es que resaltar el enlace activo del menú no sólo mejora la usabilidad general, sino que aporta también un toque de profesionalidad con muy poco esfuerzo de código.

En este artículo vamos a ver cómo crear una función PHP que detecte la sección actual y resalte el menú que está activo en ese momento. Si bien copiando y pegando podrás hacerlo sin problemas, lo recomendable es tener al menos conocimiento básicos de PHP, HTML y CSS para poder adaptar el código a tus necesidades.

Función PHP

La idea con la siguiente función es básicamente poder comprobar en qué URL está el usuario y en base a eso, si se corresponde con un elemento de nuestro menú es cuando le daremos estilo. Vamos a verla primero completa y después aclaro rápidamente las partes.

function obtener_clase_menu_activo(string $ruta): string {
    // Obtenemos la ruta actual de la URL
    $actual = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
    // Comparamos
    return ($actual === $ruta) ? 'activo' : '';
}

Usamos parse_url para quedarnos solo con la parte de la ruta (por ejemplo, /sobre-nosotros), descartando cadenas de consulta o fragmentos. La comparación con === garantiza que coincidan exactamente la cadena de la ruta y el valor que le pasamos. Así evitamos falsos positivos si hay rutas similares. Si la ruta coincide, devolvemos la cadena 'activo'; en caso contrario, una cadena vacía. Al añadir este resultado como clase en el el elemento de menú, controlamos dinámicamente qué enlace estará destacado

HTML

Creada la función es el momento de pasar a montar la estructura de nuestro menú con HTML. En este punto ya sabrás que un menú se puede crear de maneras diferentes, pero la convención es usar una lista y eso vamos a hacer.

<nav>
  <ul>
    <li class="<?= obtener_clase_menu_activo('/') ?>">
      <a href="/">Inicio</a>
    </li>
    <li class="<?= obtener_clase_menu_activo('/sobre-nosotros') ?>">
      <a href="/sobre-nosotros">Sobre nosotros</a>
    </li>
    <li class="<?= obtener_clase_menu_activo('/contacto') ?>">
      <a href="/contacto">Contacto</a>
    </li>
  </ul>
</nav>

Ahí lo interesante es que prepararemos los elementos de lista para poder asignarle la clase activo si nuestra función detecta que el href del enlace interior coincida con la ruta actual.

CSS

Por último es el momento de crear los estilos para nuestro menú. Dispondremos los elementos de la lista en modo display: flex para que se sitúen horizontalmente. Después le daremos un color general a los enlaces en estado de reposo y por último, cuando el elemento esté marcado con la clase active, cambiaremos el color del enlace y situaremos una línea debajo.

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
nav ul li a {
  text-decoration: none;
  color: #333;
}
nav ul li.activo a {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

Lógicamente estos estilos son una aproximación básica, si controlas de maquetación con CSS podrás hacer estilos todo lo complejo que quieras e incluso añadir animaciones.