Navbar de sitio. · Style v10

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Nivel 1Componente canónico

Nivel 2Círculo de Santiago · variación

Nivel 3Dentro de una página

Sitio · sección

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<header class="ui-sample ui-site-header" data-site-header><a class="ui-lockup" href="#inicio" aria-label="Compañía de Innovación de Santiago, inicio"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></a><span role="separator"></span><strong>Style v10</strong><nav aria-label="Navegación principal"><a aria-current="page" href="#actual">Documentación</a><a href="#kit">Kit</a></nav><a href="#cuenta">Ingresar</a></header>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

Cambia en esta marca

Navegación y contenido propios del servicio
Acento reservado para acciones y datos

Permanece canónico

Mark CIS y namebrand de tres líneas
IBM Plex Sans, foco, espaciado y anatomía

circulodesantiago.cl

Círculo de Santiago

Autoridad: core-style/DECISIONES.md M10 y LOGOS-CANONICOS.md

Cambia en esta marca

Mark circular y namebrand Círculo de Santiago en caja normal
Contenido societario y navegación propia

Permanece canónico

Misma estructura, orden de cuenta y footer
Tipografía, foco y comportamiento canónicos

Comparación histórica recuperable

Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado

Conserva el namebrand canónico y el contexto en una línea separada.
Mantén cuenta, navegación y destino actual en lugares predecibles.

Antes · problema observadoAnti-ejemplo no interactivo

CISTítulo debajo del namebrandMenú distinto en esta página

No inventes abreviaturas ni cambies mayúsculas del namebrand.
No cambies navbar o footer entre páginas del mismo sitio.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

320 pxMóvil y zoom

1280 pxEscritorio

Cobertura

Dimensión	Contrato
Propietario canónico	Sistema de diseño CIS · core/core-style
Consumidores	CIS, CDS, COCHID y todos los sitios
Dependencias	HTML nativo, cis-auth para sesión
Estado	candidato

Evidencia de adopción

Patrón observado. 21 implementaciones observadas en 14 repositorios.

La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.

Dato	Resultado
Clasificación	Patrón observado
Implementaciones	21 implementaciones observadas
Repositorios	cds/cis/cis-inbox, cds/cis/cis-ui, cds/cis/cis-usaia, cds/cis/periodismo2-frontend, cis/projects/lepp/lepp-frontend, cochid/cochid-congreso, cochid/cochid-datos, cochid/cochid-graphs, cochid/cochid-lex, cochid/cochid-medicamentos, cochid/cochid-medicamentos-prod, cochid/cochid-mundial, cochid/cochid-scribe, cochid/cochid-thesis
Snapshot	kit/componentes/componentes-observados.json

Consumidores observados

El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.

Ver implementaciones asociadas a Navbar de sitio

Estados

Estado requerido
base
actual
móvil
sin sesión

Accesibilidad

Conserva nombre accesible, orden de lectura y foco visible.
Funciona a 320 px, con zoom de 200% y texto largo.
El color nunca es la única señal de estado o acción.
El contenido esencial permanece disponible sin JavaScript.

Código HTML

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<header class="ui-sample ui-site-header" data-site-header><a class="ui-lockup" href="#inicio" aria-label="Compañía de Innovación de Santiago, inicio"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></a><span role="separator"></span><strong>Style v10</strong><nav aria-label="Navegación principal"><a aria-current="page" href="#actual">Documentación</a><a href="#kit">Kit</a></nav><a href="#cuenta">Ingresar</a></header>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<header class="ui-sample ui-site-header border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center justify-between gap-3" data-site-header><a class="ui-lockup underline underline-offset-4" href="#inicio" aria-label="Compañía de Innovación de Santiago, inicio"><svg class="ui-lockup__mark h-auto w-full" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></a><span role="separator"></span><strong>Style v10</strong><nav class="flex flex-wrap items-center gap-3" aria-label="Navegación principal"><a class="underline underline-offset-4" aria-current="page" href="#actual">Documentación</a><a class="underline underline-offset-4" href="#kit">Kit</a></nav><a class="underline underline-offset-4" href="#cuenta">Ingresar</a></header>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

import type { ReactNode } from "react";

export interface ChromeLink {
  href: string;
  label: string;
  current?: boolean;
}

export interface SiteHeaderProps {
  brand: string;
  homeHref: string;
  lockupSrc: string;
  name: string;
  links: ChromeLink[];
  loginHref: string;
  contextLabel?: string;
  actions?: ReactNode;
  sessionAction?: ReactNode;
  /** Índice cis.search.v1 del mismo origen; sin él se usa la navegación. */
  searchIndexUrl?: string;
  searchLabel?: string;
  /** ID del main. Usa false cuando la página ya entrega su enlace de salto. */
  skipTargetId?: string | false;
  /** Versión oscura del lockup (`<marca>-lockup-dark.svg`); con ella la barra cambia de logo en tema oscuro. */
  lockupDarkSrc?: string;
  /** Lockup en línea (por ejemplo `<BrandLockup brand="cis" />`); reemplaza las imágenes y sigue el tema. */
  lockup?: ReactNode;
}

export function SiteHeader({ brand, homeHref, lockupSrc, name, links, loginHref, contextLabel, actions, sessionAction, searchIndexUrl, searchLabel, lockupDarkSrc, lockup, skipTargetId = "contenido-principal" }: SiteHeaderProps) {
  return (
    <>
    {skipTargetId ? <a className="skip-link" data-cis-skip href={`#${skipTargetId}`}>Saltar al contenido</a> : null}
    <header className="gr-nav" data-cis-chrome="v1" data-site-header data-brand={brand} data-search-index={searchIndexUrl} data-search-label={searchLabel ?? `Buscar en ${name}`}>
      <div className="gr-nav__inner">
        <a className="gr-nav__brand" href={homeHref} aria-label={`${name}, inicio`}>
          {lockup ?? <><img className={lockupDarkSrc ? "gr-logo-claro" : undefined} src={lockupSrc} alt={name} />{lockupDarkSrc ? <img className="gr-logo-oscuro" src={lockupDarkSrc} alt={name} /> : null}</>}
          {contextLabel ? <span className="gr-nav__wordmark">{contextLabel}</span> : null}
        </a>
        <nav className="gr-nav__links" aria-label="Navegación principal">
          <div className="gr-nav__group">
            {links.map((link) => <a key={link.href} className={`gr-nav__link${link.current ? " is-active" : ""}`} href={link.href} aria-current={link.current ? "page" : undefined}>{link.label}</a>)}
          </div>
        </nav>
        <div className="gr-nav__actions">
          {actions}
          <button className="gr-nav__search" type="button" data-cis-search aria-label="Buscar (Ctrl K)" aria-haspopup="dialog" aria-keyshortcuts="Control+K Meta+K">
            <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.35-4.35" /></svg>
          </button>
          <button className="gr-nav__theme" type="button" data-theme-toggle aria-label="Cambiar tema" aria-pressed="false">
            <span className="icon-sun" aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></svg></span><span className="icon-moon" aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z" /></svg></span><span className="gr-nav__sr">Cambiar tema</span>
          </button>
          {sessionAction ?? <a className="gr-nav__entrar" href={loginHref}>Iniciar sesión</a>}
        </div>
        <button className="gr-nav__toggle" type="button" aria-label="Abrir menú" aria-expanded="false"><span></span><span></span><span></span></button>
      </div>
    </header>
    </>
  );
}