Containers
Definen el ancho estructural del header y su alineación general.
Navigation Pattern
La navegación organiza accesos, jerarquía y orientación del usuario. Este patrón muestra cómo construir headers y menús claros usando el sistema.
Qué resuelve este patrón
Un patrón de navegación debe presentar la marca, organizar enlaces y mantener claridad entre navegación principal, acciones secundarias y comportamiento responsive.
Este patrón se construye con container, align, lists, visibility, spacing y text helpers, sin necesidad de crear reglas estructurales fuera del framework.
Módulos que intervienen
Align
Organiza marca, navegación y acciones en un mismo eje.
Lists
Convierte la navegación en listas inline o grupos verticales consistentes.
Visibility
Permite separar versión desktop y móvil del patrón.
Spacing
Resuelve paddings y ajustes puntuales del bloque.
Text
Aplica jerarquía, mayúsculas y consistencia visual a los enlaces.
Ejemplo de navegación desktop
Framework
<header class="py-3">
<div class="container container-xl">
<div class="align justify-between items-center gap-3 wrap">
<div class="stack stack-xs">
<p class="meta ls-sm">Octanogram</p>
<strong>Framework</strong>
</div>
<nav>
<ul class="list list-inline gap-3">
<li><a href="#" class="fnt-uppercase">Home</a></li>
<li><a href="#" class="fnt-uppercase">Docs</a></li>
<li><a href="#" class="fnt-uppercase">Layout</a></li>
</ul>
</nav>
<div class="align items-center gap-2">
<a href="#">Github</a>
</div>
</div>
</div>
</header>Lógica responsive del patrón
Versión móvil
En móvil, la navegación puede simplificarse mostrando solo marca y acción principal, o una versión compacta del menú.
<div class="align justify-between items-center gap-2 lg:hide">
<div>Brand</div>
<button>Menu</button>
</div>Versión desktop
En desktop, la navegación completa puede mostrarse en línea.
<nav class="hide lg:show">
<ul class="list list-inline gap-3">
...
</ul>
</nav>Variantes comunes
Header mínimo
Marca y pocos enlaces. Útil para documentación o sitios pequeños.
Navegación editorial
Marca, secciones principales y accesos secundarios.
Navegación de producto
Marca, navegación y CTA principal más marcada.
Navegación de documentación
Enlaces de sistema, índice y accesos a módulos clave.
Decisiones clave del patrón
- La navegación debe ser semánticamente una lista de enlaces.
- La marca y el menú deben compartir eje, pero no competir visualmente.
- La versión móvil debe simplificarse en vez de intentar copiar desktop.
- Los CTAs del header deben ser pocos y muy claros.
- El patrón debe adaptarse con visibility antes de caer en hacks complejos.
Qué evitar en este patrón
Demasiados enlaces
Un header con demasiadas opciones pierde jerarquía y claridad.
Duplicación sin lógica
No dupliques menús móvil y desktop si no hay una diferencia real de uso.
Alineación improvisada
No resuelvas el header con márgenes arbitrarios cuando align ya cubre la composición.
Jerarquía confusa
Marca, menú y CTA deben tener roles distintos y visibles.
Siguiente paso
Continúa con pattern cards para revisar patrones aplicados de grids modulares.