Navigation Bar y Breadcrumbs

Acabamos de ver la importancia del mapa del sitio y las motivaciones de tener un buen diseño de
navagabilidad. Ahora veremos qué nos brinda Bootstrap para concretarlo.

Empecemos por el componente NavBar que nos permite crear una barra de navegación. La barra de
navegación muestra, primeramente, las secciones del sitio por donde el visitante puede empezar a
explorar. Se suele ubicar en la parte superior de la web y se mantiene inalterable en el cambio de
cada página, a lo sumo, se cambia el color de la sección que se está mostrando para ubicar al
visitante. Algunas webs la ubican en los laterales y en los dispositivos mobile se suele colapsar para
no entorpecer la página mostrada.

Algunos criterios a tener en cuenta en el diseño de tu barra de navegación son:

• Incluir el logo de tu sitio

• El click en el logo debe redirigir a la página principal
• Los nombres de las secciones deben ser explícitos y en el lenguaje del visitante
• Mostrar pocas secciones para no marear al visitante
• Preferir nombres cortos
• Indicar con un color contrastante la sección en la que se encuentra el usuario
• Si se incluye un login o logout, ubicarlo claramente en la barra de navegación

Analicemos la barra de navegación del sitio de Bootstrap.

Apenas ingresamos al sitio, observa que tiene el logo e indica que estamos en la Home con la
tipografia en negrita. Luego, indica todas las secciones relevamentes y a la derecha da información
de la versión presentada, el repositorio de github y redes sociales. Se indica claramente la acción
principal que busca Bootstrap que realicemos, su descarga. Los colores son armónicos y alineados
con el violeta de la marca. El espacio utilizado en la barra, se distribuye entre el mapa del sitio a la
izquieda, con las acciones e información adicional a la derecha. Un visitante nuevo puede
comprender rápidamente qué se le ofrece viendo solamente la barra de navegación. Esto es un
ejemplo de buen diseño de barra.

Pasemos a los Breadcrumbs. Como dijimos anteriormente, es un componente que nos permite
ubicar al visitante en la estructura del sitio y permitirle moverse con facilidad en la jerarquía donde
se encuentra. Veamos un ejemplo de un sitio de compra-venta:

Nos indica que estamos en la sección casas en venta, dentro de la sección de Bs. As. GBA Norte,
dentro de la sección de inmuebles. A su vez, nos permite volver al listado previamente mostrado.
Este es un típico breadcrumb. Tocando en cada una de las partes, podemos ir a la sección
correspondiente y así logra situarnos en el sitio y nos permite movernos jerarquicamente.
Se debe utilizarlo sólo cuando tenemos estructuras jerárquicas de más de 2 niveles ya que si no hay
subsecciones, no agrega valor y puede resolverse utilizando algún indicador en la tipografía de la
barra de navegación, como hace Bootstrap aplica “negritas” a la sección que se muestra.

Hay 3 tipos de usos para los breadcrumbs:

• Basados en la jerarquía o ubicación: similar al ejemplo presentado

• Basados en atributos: se pasa lo más abstracto a lo más particular de un producto o tema.
Por ejemplo: Libros > Computación > Lenguajes de programación > El lenguje de
programción Smalltalk…
• Basados en pasos de un proceso: se indican los pasos realizados que realizó el usuario hasta
llegar a donde está. Por ejemplo: Elige tu producto > Confirma tus datos de pago > Indica
domicilio de entrega


Ahora sí, manos a la obra y comencemos a trabajar.