Saltar al contenido
COMPAÑÍADE INNOVACIÓNDE SANTIAGO Style v10Sistema de diseño
Revisión
Menú
Índice de Kit UI
Kit UI Componentes

Navegación del ecosistema.

Patrón canónico de navegación del ecosistema para cis, cds, cochid y todos los sitios.

Verlo por niveles

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

Ver y copiar el código de este render
HTML del nivel canónico
<nav class="ui-sample ui-nav" aria-label="Ecosistema"><strong>Sitios relacionados</strong><a href="#cis">Compañía de Innovación de Santiago</a><a href="#cds">Círculo de Santiago</a><a href="#cochid">Compañía Chilena de Inteligencia de Datos</a><a href="#marca">Firmas y Documentos</a></nav>

Variaciones por marca y sitio

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

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.

Estado actual
Navegación del ecosistema no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
Cambio propuesto
Publicar en r19 el contrato de Navegación del ecosistema para Patrón canónico de navegación del ecosistema para cis, cds, cochid y todos los sitios.
Qué ocurre si respondes No
Navegación del ecosistema queda fuera de r19 y sus ejemplos siguen sólo como evidencia pendiente de reformulación.

Preparando comparación histórica…

Antes / r19

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

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ónContrato
Propietario canónicoSistema de diseño CIS · core/core-style
ConsumidoresCIS, CDS, COCHID y todos los sitios
DependenciasHTML nativo, cis-auth para sesión
Estadocandidato

Evidencia de adopción

Patrón propuesto. 0 implementaciones observadas en 0 repositorios.

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

DatoResultado
ClasificaciónPatrón propuesto
Implementaciones0 implementaciones observadas
RepositoriosNingún repositorio observado
Snapshotkit/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 Navegación del ecosistema

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
<nav class="ui-sample ui-nav" aria-label="Ecosistema"><strong>Sitios relacionados</strong><a href="#cis">Compañía de Innovación de Santiago</a><a href="#cds">Círculo de Santiago</a><a href="#cochid">Compañía Chilena de Inteligencia de Datos</a><a href="#marca">Firmas y Documentos</a></nav>

Código TAILWIND

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

Código de referencia
<nav class="ui-sample ui-nav border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center gap-3" aria-label="Ecosistema"><strong>Sitios relacionados</strong><a class="underline underline-offset-4" href="#cis">Compañía de Innovación de Santiago</a><a class="underline underline-offset-4" href="#cds">Círculo de Santiago</a><a class="underline underline-offset-4" href="#cochid">Compañía Chilena de Inteligencia de Datos</a><a class="underline underline-offset-4" href="#marca">Firmas y Documentos</a></nav>

Código REACT

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

Código de referencia
export interface EcosystemNavItem {
  label: string;
  href: string;
  /** Marca el sitio actual con `aria-current="page"`. */
  current?: boolean;
}

const ITEMS: EcosystemNavItem[] = [
  { label: "Compañía de Innovación de Santiago", href: "#cis" },
  { label: "Círculo de Santiago", href: "#cds" },
  { label: "Compañía Chilena de Inteligencia de Datos", href: "#cochid" },
  { label: "Firmas y Documentos", href: "#marca" },
];

export interface EcosystemNavProps {
  /** Sitios del ecosistema, en orden. */
  items?: EcosystemNavItem[];
  /** Encabezado visible sobre los enlaces; vacío, no se muestra. */
  title?: string;
  /** Nombre accesible de la navegación (`aria-label`). */
  label?: string;
  className?: string;
}

/**
 * Navegación del ecosistema: enlaces a los sitios relacionados de las otras entidades y productos; va en el pie o en una sección de contexto.
 *
 * @example <EcosystemNav items={[{ label: "Círculo de Santiago", href: "#cds" }, { label: "usaia", href: "#usaia", current: true }]} />
 */
export function EcosystemNav({ items = ITEMS, title = "Sitios relacionados", label = "Ecosistema", className }: EcosystemNavProps) {
  if (!items.length) return null;
  return (
    <nav className={["ui-nav", className].filter(Boolean).join(" ")} aria-label={label}>
      {title ? <strong>{title}</strong> : null}
      {items.map((item, i) => (
        <a key={i} href={item.href} aria-current={item.current ? "page" : undefined}>{item.label}</a>
      ))}
    </nav>
  );
}