Una barra de navegación (o sistema de navegación ) es una sección de una interfaz gráfica de usuario destinada a ayudar a los visitantes a acceder a la información. Las barras de navegación se implementan en sistemas operativos, exploradores de archivos , [1] navegadores web , aplicaciones, sitios web y otras interfaces de usuario similares .
Los exploradores de archivos utilizan una barra de navegación para ayudar al usuario a recorrer el sistema de archivos . Las barras de navegación pueden incluir la ruta actual , rutas de navegación o una lista de favoritos . [2]
La barra de navegación de un navegador web incluye los botones de avance y retroceso, así como la barra de ubicación donde se ingresan las URL . [3] Anteriormente, la funcionalidad de la barra de navegación se dividía entre la barra de herramientas del navegador y la barra de direcciones , pero Google Chrome introdujo la práctica de fusionar las dos.
Por lo general, los sitios web tienen una barra de navegación principal [4] y, a veces, una barra de navegación secundaria en todas las páginas. Estas secciones de la página web incluyen enlaces a las secciones más importantes del sitio. La implementación y el diseño de las barras de navegación es un aspecto crucial del diseño web y la usabilidad web .
En general, las barras de navegación se encuentran en el encabezado de una página , pero también pueden encontrarse en forma de barra lateral.
Existen diferentes tipos de barras de navegación para distintos propósitos, como barras de navegación horizontales y verticales. Y con un proyecto de sitio web dinámico que incluya JavaScript, las barras de navegación se pueden diseñar para que sean adaptables.
Algunas versiones tempranas de Netscape usaban la etiqueta de enlace HTML para construir una barra de navegación para navegar por sitios web. [5] Hoy, la etiqueta nav se puede usar para el mismo propósito. [6] En HTML5 , los elementos de navegación están encerrados en una etiqueta, que a menudo contiene una lista de enlaces.<nav>
< nav > < ul > < li > < a href = "/" > Inicio < / a >/ li > < li >< a href = "/" > Inicio </ a >/ li > < li >< a href = "/" > Inicio </ a >/ li > < li >< a href = " /blog" > Blog </ a >/ li > < li >< a href = "/contacto" > Contacto </ a >/ li > < li >< a href = "/sobre" > Acerca de </ a >/ li > </ ul > </ nav > El elemento LINK se puede utilizar para definir una barra de herramientas de botones de navegación o un mecanismo equivalente, como elementos de menú. Muchos de los valores del atributo REL se pueden reservar para este propósito (como Inicio, Siguiente, Anterior, etc.).