En este artÃculo te voy a enseñar la mejor forma de resaltar un item del menú con Laravel y Blade.
Al momento de crear una pagina web utilizando Blade con Bootstrap seguramente tengamos un menú con las distintas secciones de nuestra web (items). Y para que los visitantes tenga una mejor experiencia y sepan en que sección están, es conveniente cambiarle el estilo css al item del menú donde se encuentran por uno que resalte mas.
Laravel nos da varias formas de hacerlo, pero aquà te voy a enseñar la mejor. 😉
¿Cómo resaltar un item del menú con Blade?
para resaltar un item de tu menú cuando el usuario ya ha hecho clic como por ejemplo, en laraveltip.com si seleccionas una de las opciones del menú, veras que se agrega un punto anaranjado por debajo para indicar que es la sección actual.
En la imagen vemos como se resalta el item Tips  del menú porque es donde estaba en ese momento. Veamos otro ejemplo de nuestra web.
Aquà podemos notar que estamos en la sección de Agradecimientos gracias al estilo distinto que tiene el item del menú. Otra cosa notable en la imagen, es que la URL también coincide con el nombre de la opción del menú, eso ya nos da una idea de como agregar una clase diferente al item. 😉
¿Y cómo hacer para resaltar una sección del menú?
Para resaltar un item del menú como hicimos en nuestra web, lo que hay que hacer es agregar una class llamada active al item seleccionado.
¿Y cómo saber que item selecciono el usuario?
Aquà es donde vamos a utilizar una función de Laravel llamada is() en nuestra plantilla de Blade. De está forma:
La función is() recibe como parámetro un nombre de la ruta devolviendo verdadero si es la sección actual que el usuario esta mirando o falso, si no lo es. Por lo tanto, el método is() es ideal para agregar una nueva clase CSS y darle un estilo diferente al item del menú para que resalte y el usuario sepa en que sección se encuentra.
 ¿Por qué utilizar la función is() de Laravel?
Existen distintas formas y técnicas en Laravel para lograr el mismo resultado, pero la mejor forma de hacerlo es con la función is() porque nos permite abstraer la url real. Si algún dÃa nos piden modificar la url por alguna razón, no tendrÃamos que modificar nuestro template. 😀
¿Desde que versión de Laravel está disponible?
Esta función hace bastante tiempo que es parte del núcleo de Laravel, ya que esta disponible desde la versión 4.2.
Conclusión
Como dije anteriormente, se puede reemplazar con otras funciones, como por ejemplo la función is() pero de $request. Pero, para resaltar un item del menú en Blade, es mas adecuando utilizar el método is() de la clase Route para no quedar atado a la url real de la pagina.
En fin…hasta aquà el tip. Espero que les sea útil. Y les dejo un enlace interesante para mostrar resultados de Eloquent con Blade que les será muy útil.
¡Hasta la próxima! 😉🤙
Excelente tips muchas gracias por compartir! ¿existe algo parecido para un grupo de rutas con un prefijo en común?
Te refieres si existe una función que acepte un array de nombres rutas (por ejemplo) y verifique si la actual coincide con alguna de ellas? No, que yo sepa. Pero podrÃas usar la función de php in_array() para hacer algo parecido.
como puedo saber si ya tiene una clase active
TendrÃas que hacer la misma consulta. Si es true, entonces exista la clase active en otro lado donde también usaste la consulta.