Comparte en Facebook Twitter Google+

Otro de los features increíbles que podemos encontrar en el componente Styde\Html es el de crear menús de navegación más fácil que nunca. Gracias a esta funcionalidad podemos definir la navegación dentro de nuestro sitio editando tan solo unas pocas líneas de código, manteniendo de igual forma otras funcionalidades como el uso de parámetros, rutas dinámicas, entre otros.

Primero que todo, debes iniciar por la Instalación del paquete Styde\Html.

Una vez instalado, tendrás disponible el facade Menu que te permite generar menús en tus vistas de blade.

Los items se reciben en forma de un array, veamos un pequeño ejemplo.

Creando un menú con Menu::make()

Creamos un nuevo controlador llamado MenuController

Posteriormente lo editamos agregando los items de nuestro menú e incluyendo la vista que deseamos mostrar.

Creamos nuestra vista llamada menu-test-blade.php

Como puedes ver pasamos al constructor del menú los parámetros: los items y las clases de los estilos que deseamos usar en el menú:

Por último editamos el archivo routes.php agregando la siguiente ruta:

El resultado final será algo como esto:

menu-make

 

Creando un sub-menu

Para crear un submenu sólo debemos incluir dentro del item que contendrá los nuevos enlaces, una llave llamada “submenu” y un array con el nuevo menú, puede que suene complicado, pero créeme, no lo es.

Ahora tendremos disponible un nuevo enlace “options” con un submenu que incluye los items “about” y “company”.

menu-make-submenu

 

Rutas y enlaces

Hasta el momento sólo hemos definido la estructura de nuestro menú, pero los items no enlazan a ninguna otra página dentro o fuera del sitio, pues como puedes ver cada item contiene un array vacío, por tanto, allí es donde vamos a definir nuestras rutas y enlaces con alguna de las siguientes opciones:

Full Url

En este caso estamos enlazando el item “home” a una ruta específica usando la llave “full_url”

Url

Cuando utilizamos la llave “url” pasamos como valor la ruta relativa y el enlace se creará utilizando UrlGenerator::to() de forma automática. En caso de que se trate de un enlace del tipo https puedes enviar como parámetro la llave “secure” para generarlo correctamente

route

De esta forma estaremos llamando a una ruta por el nombre establecido con la clave as en la definición de dicha ruta en routes.php, pero adicionalmente podemos enviar parámetros pasando un array cuyo primer valor será el nombre de la ruta y los valores siguientes serán los parámetros a utilizar.

Opciones adicionales

Clases CSS

Por defecto todos los items del menú aparecen inactivos a menos que el valor de la llave “url” del item sea igual al valor (parcial o total) de la ruta actual en la que se encuentre el usuario en tal caso se agregará al item la clase “active”.

menu-active

Para cambiar las clases por defecto “active” y “dropdown” puedes usar los siguientes métodos:

Custom templates

Puedes personalizar el template del menú especificando el nombre de la vista usando:

Esto ha sido todo por ahora, espero que no tardes mucho más tiempo para usar este componente con el que puedes ahorrar mucho trabajo en tus proyectos de Laravel. Recuerda dejar tus dudas en la sección de comentarios y no olvides compartir el contenido en redes sociales.

Material recomendado

Aprende PHP, Laravel y más por sólo 999 al mes: ver planes.

Lección anterior Implementar un foro en Laravel 5.1 con Socieboy Forum Lección siguiente Subir archivos en Laravel con Dropzone