Barra de navegación (navbar)
La cabecera de un sitio: marca, enlaces, acciones y, en pantallas estrechas, un panel que se pliega. El servidor la envía funcionando: por encima del punto de plegado es una barra, y por debajo el panel llega abierto y apilado bajo la marca, así que ningún enlace queda fuera del alcance. En init aparece el botón de hamburguesa, el panel se pliega, Escape y un clic fuera lo cierran, y una cabecera pegajosa se condensa en cuanto la página baja. No es un panel lateral: este panel es contenido en el flujo, no atrapa el foco y nunca bloquea la página.
Cada cabecera de abajo funciona en una página propia, embebida aquí: la barra se fija, se condensa y se pliega contra esa página, no contra este artículo. Desplázate dentro de un escenario para ver la barra sostenerse, cambia su ancho a 390 para verla plegarse, o ábrela sola desde su barra de controles.
Un megamenú dentro del panel
Un megamenú puede vivir dentro de iv-navbar__panel. Desde el punto de ruptura lg hacia arriba sus paneles flotan bajo toda la barra; por debajo, la cabecera se pliega y esos mismos paneles se comportan como un acordeón dentro de ella. Pasa data-iv-overlay="false" al menú alojado: dentro de una cabecera la barra ya es la superficie elevada, y un velo por debajo oscurecería la propia cabecera.
Transparente sobre una portada
iv-navbar--transparent quita el fondo y toma texto claro mientras la cabecera está sobre un hero; en cuanto se condensa o abre su panel, vuelven la superficie y los colores de la página, porque una barra transparente sobre contenido no se lee. iv-navbar--glass mantiene la superficie de cristal en cualquier posición de scroll, y iv-navbar--center centra los enlaces y deja las acciones al final.
Opciones
| Opción | Atributo | Por defecto | Efecto |
|---|---|---|---|
collapseBelow | data-iv-collapse-below | lg | Punto de ruptura por debajo del cual el panel se pliega tras la hamburguesa. none no pliega nunca. |
sticky | data-iv-sticky | false | Mantiene la cabecera arriba y la condensa al hacer scroll. |
condenseAt | data-iv-condense-at | 24 | Píxeles de scroll antes de que data-iv-condensed aparezca en la cabecera. |
hideOnScroll | data-iv-hide-on-scroll | false | Retira la barra al bajar y la devuelve al subir. Nunca con el panel abierto ni con el foco dentro. |
closeOnOutside | data-iv-close-on-outside | true | Un clic fuera de la cabecera cierra el panel abierto. |
Métodos y eventos
open(), close(reason), toggle(), destroy(); lectura de isOpen y isCondensed. Por encima del punto de plegado open() no hace nada e isOpen se queda en false: no hay nada plegado que desplegar.
| Evento | Cuándo | detail |
|---|---|---|
iv:open → iv:opened | el panel plegado se despliega; el primero es cancelable | reason, trigger |
iv:close → iv:closed | el panel vuelve a plegarse | reason: trigger, escape, external, api o viewport |
iv:condense | la cabecera entra o sale del estado condensado | condensed |
Teclado y tecnología asistiva
La cabecera es una región <header> y los enlaces viven en un <nav> con su propia etiqueta. La hamburguesa es un botón de verdad con nombre para lectores de pantalla, aria-expanded y aria-controls; Enter y Espacio funcionan sobre ella, Escape cierra el panel y devuelve el foco al botón, y Tab recorre el panel abierto en el orden del documento. La página actual lleva aria-current="page". No se usan roles de menú: esto son enlaces, no un menú. Cruzar el punto de ruptura hacia arriba cierra el panel y devuelve el mando a la barra.
Sin JavaScript
Todo sigue al alcance. Por encima de collapseBelow el panel es una barra en línea con la marca; por debajo llega abierto y apilado, y la hamburguesa se queda hidden porque no tendría nada que alternar. El plegado solo ocurre bajo [data-iv-js], así que un script que no cargue no puede esconder un menú. La cabecera pegajosa la hace el CSS y tampoco necesita script; solo lo necesitan condensarse, retirarse al bajar y el panel plegado.
El panel se sirve abierto e init lo pliega, lo que desplaza toda la página hacia abajo en un móvil cuando arranca el script. Para plegarlo desde el primer pintado, marca la raíz antes de la hoja con una línea en <head>: <script>document.documentElement.setAttribute("data-iv-js", "")</script>. Por debajo de lg el panel arranca plegado y el toggle aparece cuando init lo muestra; desde lg la barra va en línea. Tan pronto solo se conoce el breakpoint por defecto. Si el script pudiera no cargar, no pongas la marca: un panel plegado sin toggle es peor que un salto. La receta showcase la usa.
Tokens y locales
| Local | Por defecto | Qué mueve |
|---|---|---|
--iv-navbar-height | 4rem | Altura de la barra en reposo. |
--iv-navbar-height-condensed | 3.25rem | Altura una vez pasado condenseAt. |
--iv-navbar-bg | var(--iv-color-bg) | Superficie de la barra. |
--iv-navbar-max | var(--iv-container-max) | Ancho al que se centra la fila interior. |
--iv-navbar-gap | var(--iv-space-5) | Separación entre marca, navegación y acciones. |
--iv-navbar-z | 150 | Orden de apilado frente a la página. |
El estado vive en atributos para que el CSS pueda leerlo: data-iv-collapsible mientras el ancho está por debajo del punto de ruptura, data-iv-open en el panel desplegado, data-iv-condensed tras el scroll y data-iv-hidden en una barra retirada. La barra condensada toma --iv-shadow-ambient y un fondo de cristal; con movimiento reducido nada se desplaza, pero data-iv-hidden sigue apartando la barra porque eso es estado, no adorno.
Errores frecuentes
- Servir el panel cerrado. Sin el script nada lo abriría; el marcado tiene que llegar usable y plegarse después.
- Usar la barra como panel lateral. Si la navegación debe cubrir la página y atrapar el foco, eso es drawer.
- Combinar
hideOnScrollcon contenido que salta a anclas: la barra escribescroll-padding-block-startmientras es pegajosa, pero una cabecera que aparece y desaparece cuesta orientación. - Un megamenú alojado con su superposición encendida: el velo oscurece la propia barra desde la que estás leyendo.