Añadiendo un camino de migas de pan en Rails con Gretel

Recientemente he tenido que implementar un camino de migas de pan, o breadcrumbs en inglés, en una web con varios niveles de páginas para mejorar su usabilidad. Con un par de niveles no suele ser necesario, pero si la web es muy compleja es recomendable utilizar el camino de migas para que los usuarios sepan en cada momento dónde están, de dónde vienen y cómo volver hacía atrás sin tener que regresar a la home. Éste último es un problema muy común en las single-page applications, ya que el navegador no suele ser consciente de los cambios de página y volver hacia atrás significa salir de la página.

Después de buscar varias alternativas al final me he decidido por utilizar la gema Gretel, ya que me ha parecido muy sencilla de utilizar y sobre todo de mantener.

Para utilizar la gema gretel en nuestra aplicación Rails solo tenemos que añadirla a nuestro fichero Gemfile:

gem "gretel"

E instalarla:

bundle install

Una vez tengamos la gema instalada necesitaremos generar el fichero de configuración donde especificaremos las migas de pan de nuestros caminos de migas. Para ello podemos ejecutar el siguiente comando que se encarga de crear el fichero de configuración junto con unas migas de pan de ejemplo con la que trabajaremos en este tutorial:

rails generate gretel:install

Una vez ejecutado el comando anterior veremos un nuevo fichero llamado breadcrumbs.rb en el directorio config de nuestra aplicación con el siguiente contenido (puede cambiar en versiones nuevas de gretel):

# config/breadcrumbs.rb

# Root crumb
crumb :root do
  link "Home", root_path
end

# Issue list
crumb :issues do
  link "All issues", issues_path
end

# Issue
crumb :issue do |issue|
  link issue.title, issue
  parent :issues
end

El funcionamiento es muy sencillo. Cada miga de pan se define en un bloque crumb seguido de su nombre (:root, :issues, :issue…), y dentro del bloque se especifica el enlace de la miga de pan y su parentesco con otras migas (excepto con la miga :root, que es automático). El enlace tiene dos parámetros: el texto a mostrar en la página (“Home”) y la url para navegar hasta allí (root_path). Opcionalmente podemos pasar a los bloques crumb uno o varios argumentos que podremos utilizar, por ejemplo, para generar los enlaces. Si nos fijamos en la miga :issue veremos que el objeto issue que se le pasa como parámetro se está utilizando para generar tanto el nombre de la miga como su enlace.

Una vez tengamos definidas todas nuestras migas de pan solo nos queda añadir el siguiente fragmento de código en el layout application.html.erb:

# app/views/layouts/application.html.erb
<%= breadcrumbs separator: " &rsaquo; " %>

Y utilizarlas en nuestras vistas indicando solamente el nombre de la miga de pan y pasando los parámetros que sean necesarios. A partir del nombre de la miga de pan y de las relaciones de parentesco especificadas en el fichero de configuración gretel se encargará por nosotros de componer todo el camino de migas de pan desde la home hasta la página actual:

# app/views/issues/index.html.erb
<% breadcrumb :issues %>

# app/views/issues/show.html.erb
<% breadcrumb :issue, @issue %>

Como resultado si accediéramos a la página index de las issues veríamos el siguiente camino de migas desde la home:

Home > All issues

Y si accediésemos a la vista de una de las issues veríamos el siguiente camino de migas:

Home > All issues > Título de la issue

Como veis el uso de Gretel simplifica mucho el uso de un camino de migas de pan ya que en las vistas solo especificamos el nombre de la miga a mostrar y es en el fichero de configuración donde relacionamos unas migas con otras. De esta forma si uno de los niveles de nuestras páginas cambia no tendríamos que ir vista por vista modificando el camino de migas, sino que desde el fichero de configuración eliminaríamos o añadiríamos un nuevo parentesco y listo. De esta forma todo queda centralizado en un único fichero de configuración que hace que nuestro camino de migas sea mucho más mantenible.

Por último solo nos quedaría personalizar los estilos de nuestro camino de migas para adaptarlo al estilo de nuestra web. En el ejemplo anterior de la miga :issue Gretel generaría el siguiente código HTML para mostrar las migas en nuestras páginas, por lo que solo tendríamos que añadir los estilos correspondientes en nuestro fichero .css.

<div class="breadcrumbs">
 <a href="/">Home</a> &rsaquo;
 <a href="/issues">All issues</a> &rsaquo;
 <span class="current">My Issue</span>
</div>

En mi caso como el diseño estándar encaja bastante bien con el diseño de la web en la que lo he implementado simplemente voy a añadir un pequeño margen superior e inferior para dejar algo de separación con la cabecera y con el contenido de la web, y voy a cambiar el color y el estilo de la miga actual en la que nos encontramos para que se diferencie del resto.

.breadcrumbs {
  margin-top: 10px;
  margin-bottom: 10px;
}

.breadcrumbs .current {
  font-style: italic;
  color: #222;
}

Con estos sencillos pasos tendremos implementado en nuestra aplicación un sistema de migas de pan muy sencillo, fácil de configurar y de mantener.

Para ver todas las posibilidades que ofrece la Gretel y sus distintas configuraciones podéis visitar el repositorio del proyecto en Github.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *