Carril de Navegación

Proporcionan acceso a los destinos principales de las aplicaciones en tabletas y computadores.

El carril de navegación tiene funcionalidades importantes como la estructuración y organización del contenido, la navegación principal, la jerarquía, el marcado de ubicación, el acceso rápido a funciones claves.

Los carriles proporcionan una forma clara y eficiente de navegar por la interfaz, facilitando la comprensión y el acceso a diferentes partes del sitio o aplicación.

El carril de navegación solo se utilizan en sitios web con accesos privados, dashboards y aplicaciones, con la finalidad de diferenciar las experiencias de usuario privadas y públicas.

El carril de navegación también conocido como barra lateral de navegación, es un componente común en la interfaz de usuario que tiene varias funcionalidades claves. Estas son algunas de las características y funcionalidades del carril de navegación:

  • Estructura: El carril de navegación se utiliza para organizar y estructurar las diferentes secciones o áreas de una aplicación o sitio web privado o software. Proporciona una vista general de la experiencia completa a un nivel jerárquico primario, es decir, todo el sitio esta bajo estas categorías o secciones que se incluyen en un carril de navegación.

  • Navegación: El carril de navegación actúa como un punto central para la navegación principal del usuario. Puede contener enlaces o iconos que representan diferentes secciones, páginas o funciones de la interfaz. Los usuarios pueden hacer clic en estos enlaces para acceder rápidamente a diferentes partes del sitio o aplicación.

  • Menús: El carril de navegación puede incluir menús desplegables que permiten una navegación en varios niveles. Esto es útil cuando hay subsecciones o subcategorías dentro de las principales secciones de la interfaz. Los usuarios pueden expandir los menús desplegables para acceder a contenido o funcionalidad adicional.

  • Estados: El carril de navegación tiene dos estados:

    • Contraído: Donde los botones se reducen solo a los iconos, permitiendo mayor espacio para los componentes. Por otro lado al pasar sobre el carril de navegación, este se expande para exponer las etiquetas de los botones.

    • Expandido: El estado expandido del carril permite explicar con mayor información las acciones que se incluyen. Al salir del carril con la versión computador escritorio, este permite contraer nuevamente el carril a lo más mínimos, los iconos. En este estado expandido, es posible mantener un estado fijo para carriles de navegación que lo requieran.

  • Marcado: El carril de navegación suele resaltar visualmente la ubicación o sección actual en la que se encuentra el usuario. Esto proporciona una orientación clara y ayuda a los usuarios a comprender su posición dentro de la interfaz.

  • Móvil: En las interfaces responsivas o en aplicaciones móviles, el carril de navegación se puede colapsar o transformar en un menú desplegable para adaptarse a pantallas más pequeñas. Esto permite una navegación eficiente en dispositivos móviles, donde el espacio en pantalla es limitado.

Carril de Navegación para escritorio

Inicio
Tutoriales
12
Asistencia Académica
Servicios Financieros
Registro de Notas
Servicios
Beta
Tu Perfil
Buscar
Ayuda
Salir

HTML

<div class="carril-navegacion" id="carril-navegacion-1">
<div class="seccion-superior">
<div class="logo-imagen flex flex-column" style="margin-bottom: 40px;">
<img id="logo-aiep1" src="img/logotipo_aiep_carril1.svg" alt="" width="52" height="44">
<img id="logo-aiep2" src="img/logotipo_aiep_carril2.svg" alt="" width="81" height="44">
</div>
<div class="flex flex-column gap-5">
<hr class="divisor">
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/inicio_lineal.svg" alt="" width="32" height="32">
</div>
Inicio </div>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/tutoriales_lineal.svg" alt="" width="32" height="32">
<span class="insignia insignia-absolute" style="top:0; right: 16px;"></span>

</div>
Tutoriales </div>
<span class="insignia-numero">12</span>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/apoyo_academico_lineal.svg" alt="" width="32" height="32">
</div>
Asistencia Académica </div>
<img src="iconos/derecha_lineal.svg" alt="" width="32">
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/servicios_financieros_lineal.svg" alt="" width="32" height="32">
<span class="insignia insignia-absolute" style="top:0; right: 16px;background-color: #DD7A23;"></span> </div>
Servicios Financieros </div>
<img src="iconos/alerta_lleno_naranjo.svg" alt="" width="32" height="32">
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/asistencia_alumno_lineal.svg" alt="" width="32" height="32">
</div>
Registro de Notas </div>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/servicios_lineal.svg" alt="" width="32" height="32">
<span class="insignia insignia-absolute" style="top:0; right: 16px;background-color: #3D8DDD;"></span> </div>
Servicios </div>
<span class="insignia-etiqueta insignia-info" style="right: 0;">Beta</span>
</div>
</div>
</div>
<div class="seccion-inferior">
<div class="flex flex-column gap-5">
<hr class="divisor">
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/usuario_lineal.svg" alt="" width="32" height="32">
</div>
Tu Perfil </div>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/lupa_lineal.svg" alt="" width="32" height="32"> </div>
Buscar </div>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/pregunta_lineal.svg" alt="" width="32" height="32">
</div>
Ayuda </div>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/salir_lleno.svg" alt="" width="32" height="32"> </div>
Salir </div>
</div>
</div>
</div>
</div>

CSS

.pos-relative {
position: relative;
}

.pos-absolute {
position: absolute;
}

.flex {
display: flex;
}

.flex-column {
flex-direction: column;
}

.align-items-center {
align-items: center;
}

.flex-wrap {
flex-wrap: wrap;
}

.gap-5 {
gap: 5px;
}

.gap-10 {
gap: 10px;
}

.gap-20 {
gap: 20px;
}

.gap-30 {
gap: 30px;
}

.gap-40 {
gap: 40px;
}

.carril-navegacion {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 10px 10px 20px;
gap: 20px;

position: fixed;
width: 72px;
overflow-x: hidden;
height: 100vh;
background: #FFFFFF;
border-radius: 0px 0px 10px 0px;
justify-content: space-between;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
overflow: hidden;
}

.seccion-superior,
.seccion-inferior {
width: 100%;
}

.carril-elemento {
display: flex;
width: 100%;
min-width: 300px;
overflow-x: hidden;
gap: 10px;
align-items: center;
justify-content: space-between;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
height: 56px;
color: #024588;
mix-blend-mode: normal;
cursor: pointer;
padding: 12px 10px;
white-space: nowrap;
}

.carril-elemento:hover {
background: #D7E5F4;
border-radius: 10px;
}

.carril-navegacion .carril-elemento .icon-box {
position: relative;
width: 52px;
background: #FFFFFF;
}

.carril-navegacion .carril-elemento:hover .icon-box {
background: #D7E5F4;
border-radius: 10px;
}

.carril-navegacion #logo-aiep2 {
display: none;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}

JS

var elemento = document.getElementById("carril-navegacion-1");
var insignias = document.querySelectorAll("#carril-navegacion-1 .insignia");
var logos = document.querySelectorAll(".logo-imagen img");

elemento.addEventListener("mouseover", function (event) {
event.preventDefault();
setTimeout(function () {
elemento.style.width = '350px';
logos[0].classList.add('esconder');
logos[1].classList.add('mostrar');
insignias.forEach((elemento) => {
elemento.style.display = 'none';
});
}, 50);
});

elemento.addEventListener("mouseleave", function (event) {
event.preventDefault();
setTimeout(function () {
elemento.style.width = '72px';
logos[0].classList.remove('esconder');
logos[1].classList.remove('mostrar');
insignias.forEach((elemento) => {
elemento.style.display = 'block';
});
}, 500);

});

Carril de Navegación para Móviles y Tabletas

Inicio
Tutoriales
Asistencia Académica
Servicios Financieros
Registro de Notas
Servicios
Beta
Tu Perfil
Buscar
Ayuda
Salir

HTML

<div class="carril-navegacion" style="width: 350px;">
<div class="seccion-superior">
<div class="logo-imagen flex flex-column" style="margin-bottom: 40px;">
<img src="img/logotipo_aiep_carril2.svg" alt="" width="81" height="44">
</div>
<div class="flex flex-column gap-5">
<hr class="divisor">
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/inicio_lineal.svg" alt="" width="32" height="32">
</div>
Inicio </div>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/tutoriales_lineal.svg" alt="" width="32" height="32">
</div>
Tutoriales </div>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/apoyo_academico_lineal.svg" alt="" width="32" height="32">
</div>
Asistencia Académica </div>
<img src="iconos/derecha_lineal.svg" alt="" width="32">
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/servicios_financieros_lineal.svg" alt="" width="32" height="32">
</div>
Servicios Financieros </div>
<img src="iconos/alerta_lleno_naranjo.svg" alt="" width="32" height="32">
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/asistencia_alumno_lineal.svg" alt="" width="32" height="32">
</div>
Registro de Notas </div>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/servicios_lineal.svg" alt="" width="32" height="32">
</div>
Servicios </div>
<span class="insignia-etiqueta insignia-info" style="right: 0;">Beta</span>
</div>
</div>
</div>
<div class="seccion-inferior">
<div class="flex flex-column gap-5">
<hr class="divisor">
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/usuario_lineal.svg" alt="" width="32" height="32">
</div>
Tu Perfil </div>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/lupa_lineal.svg" alt="" width="32" height="32">
</div>
Buscar </div>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/pregunta_lineal.svg" alt="" width="32" height="32">
</div>
Ayuda </div>
</div>
<div class="carril-elemento">
<div class="flex gap-10 align-items-center">
<div class="icon-box">
<img src="iconos/salir_lleno.svg" alt="" width="32" height="32">
</div>
Salir </div>
</div>
</div>
</div>
</div>

CSS

.pos-relative {
position: relative;
}

.pos-absolute {
position: absolute;
}

.flex {
display: flex;
}

.flex-column {
flex-direction: column;
}

.align-items-center {
align-items: center;
}

.flex-wrap {
flex-wrap: wrap;
}

.gap-5 {
gap: 5px;
}

.gap-10 {
gap: 10px;
}

.gap-20 {
gap: 20px;
}

.gap-30 {
gap: 30px;
}

.gap-40 {
gap: 40px;
}

.carril-navegacion {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 10px 10px 20px;
gap: 20px;

position: fixed;
width: 72px;
overflow-x: hidden;
height: 100vh;
background: #FFFFFF;
border-radius: 0px 0px 10px 0px;
justify-content: space-between;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
overflow: hidden;
}

.seccion-superior,
.seccion-inferior {
width: 100%;
}

.carril-elemento {
display: flex;
width: 100%;
min-width: 300px;
overflow-x: hidden;
gap: 10px;
align-items: center;
justify-content: space-between;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
height: 56px;
color: #024588;
mix-blend-mode: normal;
cursor: pointer;
padding: 12px 10px;
white-space: nowrap;
}

.carril-elemento:hover {
background: #D7E5F4;
border-radius: 10px;
}

.carril-navegacion .carril-elemento .icon-box {
position: relative;
width: 52px;
background: #FFFFFF;
}

.carril-navegacion .carril-elemento:hover .icon-box {
background: #D7E5F4;
border-radius: 10px;
}

.carril-navegacion #logo-aiep2 {
display: none;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}

JS

Carril de Navegación para Móviles y Tabletas opción 2

Descubre
Educación
68
Empleabilidad
Cultura
Noticias
Admisión
Buscar
Pagos
Ingresar

HTML

<div class="carril-navegacion" style="width: 290px; height: auto;">
<div class="seccion-superior">
<img src="iconos/cerrar_lineal.svg" alt="" height="32" width="32" style="position: absolute; top:12px; right: 10px; cursor: pointer;">
<div class="logo-imagen flex flex-column" style="margin-bottom: 30px;">

<img src="img/logotipo_aiep_carril2.svg" alt="" width="81" height="44">
</div>
<div class="flex flex-column gap-5">
<div class="carril-elemento" style="min-width: unset;">
Descubre </div>
<div class="carril-elemento" style="min-width: unset;">
Educación <div class="flex gap-10 align-items-center">
<span class="insignia-etiqueta insignia-info" style="right: 0;">68</span>
<img src="iconos/derecha_lineal.svg" alt="" width="32">
</div>

</div>
<div class="carril-elemento" style="min-width: unset;">
Empleabilidad <div class="flex gap-10 align-items-center">
<img src="iconos/derecha_lineal.svg" alt="" width="32"> </div>

</div>
<div class="carril-elemento" style="min-width: unset;">
Cultura <div class="flex gap-10 align-items-center">
<img src="iconos/derecha_lineal.svg" alt="" width="32">
</div>
</div>
<div class="carril-elemento" style="min-width: unset;">
Noticias </div>

<div class="carril-elemento" style="min-width: 320px;background-color: #B40000; color: white; width: 100%; box-sizing: border-box;margin-left: -20px; padding-left: 30px;border-radius: unset;">
Admisión
</div>

</div>
</div>
<div class="seccion-inferior">
<div class="flex flex-column gap-5">
<hr class="divisor">
<div class="carril-elemento" style="min-width: unset;">
<div class="flex gap-10 align-items-center">
<div class="icon-box" style="width: auto;">
<img src="iconos/lupa_lineal.svg" alt="" width="32" height="32">
</div>
Buscar </div>
</div>
<div class="carril-elemento" style="min-width: unset;">
<div class="flex gap-10 align-items-center">
<div class="icon-box" style="width: auto;">
<img src="iconos/pagar_lineal.svg" alt="" width="32" height="32">
</div>
Pagos </div>
</div>
<div class="carril-elemento" style="min-width: unset;">
<div class="flex gap-10 align-items-center">
<div class="icon-box" style="width: auto;">
<img src="iconos/usuario_lineal-1.svg" alt="" width="32" height="32">
</div>
Ingresar </div>
</div>

</div>

</div>
</div>

CSS

.pos-relative {
position: relative;
}

.pos-absolute {
position: absolute;
}

.flex {
display: flex;
}

.flex-column {
flex-direction: column;
}

.align-items-center {
align-items: center;
}

.flex-wrap {
flex-wrap: wrap;
}

.gap-5 {
gap: 5px;
}

.gap-10 {
gap: 10px;
}

.gap-20 {
gap: 20px;
}

.gap-30 {
gap: 30px;
}

.gap-40 {
gap: 40px;
}

.carril-navegacion {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 10px 10px 20px;
gap: 20px;

position: fixed;
width: 72px;
overflow-x: hidden;
height: 100vh;
background: #FFFFFF;
border-radius: 0px 0px 10px 0px;
justify-content: space-between;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
overflow: hidden;
}

.seccion-superior,
.seccion-inferior {
width: 100%;
}

.carril-elemento {
display: flex;
width: 100%;
min-width: 300px;
overflow-x: hidden;
gap: 10px;
align-items: center;
justify-content: space-between;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
height: 56px;
color: #024588;
mix-blend-mode: normal;
cursor: pointer;
padding: 12px 10px;
white-space: nowrap;
}

.carril-elemento:hover {
background: #D7E5F4;
border-radius: 10px;
}

.carril-navegacion .carril-elemento .icon-box {
position: relative;
width: 52px;
background: #FFFFFF;
}

.carril-navegacion .carril-elemento:hover .icon-box {
background: #D7E5F4;
border-radius: 10px;
}

.carril-navegacion #logo-aiep2 {
display: none;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}

JS

Carril de Navegación

Código copiado al portapapeles