Web ResponsiveComponents
Navbars

Navbars

La navbar es el componente de navegación básico que debes usar en todas las páginas para permitir que los usuarios puedan acceder a nuevas secciones o desencadenar ciertas acciones, como hacer log in al sistema por ejemplo. Como la versión web de InfoJobs es responsive debes tener en cuenta también la manera en la que la navbar se adapta a los diferentes dispositivos en función al ancho de la pantalla. Recuerda ser consistente en el uso de la navegación para evitar que los usuarios se pierdan.

Navbar default de InfoJobs adaptada a diferentes anchos de pantalla.

Navbar principal

La navbar principal es el elemento de navegación de primer nivel. Debe contener como mínimo el logo principal de InfoJobs y como normal general debe ser de color blanco. También puedes añadir otros elementos como botones, links y form inputs.

Trata de mantener la navbar principal lo más limpia posible y no añadas información en exceso que dificulte la comprensión.

Navbar principal. Los textos que indican los nombres de las secciones tienen un estado hover en azul.

Navbar secundaria

La navbar secundaria muestra las secciones de segundo nivel dentro de una sección principal. Cuando se muestra este segundo nivel de navegación, la barra que muestra la navbar de primer nivel permanece visible, pero su altura es menor que cuando aparece sola.

Navbar principal y secundaria. Las secciones activas en la navbar secundaria deben ser de color azul.

Estilos

Como norma general debes mantener la barra de navegación principal con los estilos que te hemos propuesto anteriormente.

De manera excepcional también puedes usar estilos personalizados en la navbar secundaria, en función del segmento para el que estés diseñando. Incluso puedes usar una versión en negativo de la navbar principal con el fondo en Dark Silk o Day Blue. De cualquier modo recuerda limitar el uso de este recurso.

Limita el uso de estilos alternativos en la navbar a casos muy concretos.

Navbar vertical

Usa la navbar vertical en aquellos casos en los que quieras agrupar varias opciones bajo una misma sección sin necesidad de navegar a una nueva pantalla, o cuando no te quepan todas las secciones en la navbar principal o secundaria.

En la navbar vertical puedes combinar iconos y textos.

Iconografía y texto

Puedes combinar el uso de texto e iconografía tanto en la navbar principal como en la secundaria. También puedes usar tooltips que muestren más información al usuario cuando haga hover sobre el icono, o labels que indiquen la actividad.

Combina iconografía con texto, tooltips y labels en la navbar.

Navbar en el móvil

La navbar se ajusta de manera líquida al ancho de la pantalla del dispositivo, hasta que llega al breakpoint del móvil (480px) y todo el contenido se agrupa bajo un “icono hamburguesa” situado en la parte izquierda de la cabecera.

Cuando el usuario presione el icono la pantalla se desplazará lateralmente hacia la derecha y se mostrará el menú de avegación al completo.

El “icono hamburguesa” de la parte izquierda del header oculta el manú de navegación al completo.
Al pulsar el “icono hamburguesa” se muestran todas las opciones del menú.