Cabecera

Aprobado2026-10-02 · Aprobado por el founder con capturas de la plataforma 20 (2026-10-02).

Arriba de todo el contenido: dice dónde estás y deja a mano a Kōdo.

Vista · datos de ejemplo

Anatomía

Botón de menú (sólo teléfono)
Miga: Empresa / icono + Sección
Acciones a la derecha: botón de Kōdo

Sí

Blanca, 56 px, borde inferior de 1 px
La empresa va SIEMPRE primero en la miga

No la pintes gris ni con el color del fondo
No pongas el título de la página aparte: la sección de la miga es el título

HTML exacto

<header class="nu-cabecera">
  <button type="button" class="nu-boton nu-boton--chico nu-cabecera__menu" data-nu-menu aria-label="Abrir el menú"><span class="nu-icono nu-icono--chico" data-icono="list"></span></button>
  <nav class="nu-miga" aria-label="Ubicación">
    <span class="nu-miga__empresa">
      <button type="button" class="nu-miga__org" aria-haspopup="menu" aria-expanded="false" aria-controls="empresas-cabecera" title="Cambiar de empresa">Ejemplo SpA</button>
      <span role="menu" aria-label="Empresas" class="nu-miga__menu" id="empresas-cabecera" hidden>
        <span class="nu-etiqueta nu-miga__menu-titulo">Grupo Ejemplo</span>
        <button type="button" role="menuitemradio" aria-checked="true" class="nu-miga__opcion"><span>Ejemplo SpA</span><span class="nu-miga__opcion-actual"></span></button>
        <button type="button" role="menuitemradio" aria-checked="false" class="nu-miga__opcion"><span>Ejemplo Servicios Ltda.</span></button>
      </span>
    </span>
    <span class="nu-miga__barra" aria-hidden="true">/</span>
    <span class="nu-miga__seccion" aria-current="page"><span class="nu-icono" data-icono="nuevauno_dashboard"></span>Inicio</span>
  </nav>
  <div class="nu-cabecera__acciones">
    <button type="button" class="nu-boton-kodo" aria-pressed="false" title="Pedirle algo a Kōdo (Ctrl+J)">
      <img src="https://branding.nuevauno.com/kodo/kodo-mark.svg" alt="" width="14" height="14"><span class="nu-boton-kodo__texto">Kōdo</span>
    </button>
  </div>
</header>

Clases: .nu-cabecera .nu-cabecera__acciones .nu-miga .nu-miga__seccion .nu-boton-kodo · Fragmento: snippets/header.html