Barra secundaria de producto.
Nombre del producto y hasta siete destinos; desplegable nativo bajo 56 rem, controles de 44 px y página actual subrayada.
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
<div class="gr-subnav" data-cis-secondary="v1"><div class="container gr-subnav__inner"><a class="gr-subnav__nombre" href="#producto">Mapas</a><details class="gr-subnav__menu" open><summary>Explorar</summary><nav aria-label="Navegación de Mapas"><a href="#seccion-0" aria-current="page">Explorar</a><a href="#seccion-1">Capas</a><a href="#seccion-2">Leyenda</a><a href="#seccion-3">Fuentes</a><a href="#seccion-4">Método</a><a href="#seccion-5">Descargas</a><a href="#seccion-6">Ayuda</a></nav></details></div></div>Variaciones por marca y sitio
Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.
Compañía de Innovación de Santiago
Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.mdCambia 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
Círculo de Santiago
Autoridad: core-style/DECISIONES.md M10 y LOGOS-CANONICOS.mdCambia 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
Mapas, datos y herramientas
Los ejemplos de mapas y herramientas conservan la misma estructura. Esta variante de datos cambia únicamente nombre, etiquetas y destinos. Bajo 56 rem, Enter o Espacio despliegan las secciones; Escape cierra y devuelve el foco. Sin JavaScript, details mantiene los enlaces disponibles.
La adopción del sitio ui-ux se verifica en BW-62 y BW-66. La aprobación de K6 consta en DECISIONES-APROBADAS.md del 2026-10-05.
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
- Barra secundaria de producto no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
- Cambio propuesto
- Publicar en r19 el contrato de Barra secundaria de producto para Nombre del producto y hasta siete destinos; desplegable nativo bajo 56 rem, controles de 44 px y página actual subrayada.
- Qué ocurre si respondes No
- Barra secundaria de producto 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.
- Conservar nombre, destinos y orden al plegar.
- Marcar la página actual con aria-current y subrayado.
- Usar la barra común de empresa encima de esta barra de producto.
CISTítulo debajo del namebrandMenú distinto en esta página
- Añadir más de siete destinos.
- Convertir los enlaces en un menubar.
- Añadir una segunda lupa: la búsqueda vive en la barra común.
Responsive
La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.
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 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.
| Dato | Resultado |
|---|---|
| Clasificación | Patrón propuesto |
| Implementaciones | 0 implementaciones observadas |
| Repositorios | Ningún repositorio observado |
| 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 Barra secundaria de producto
Estados
| Estado requerido |
|---|
| escritorio |
| móvil plegado |
| móvil abierto |
| página actual |
| sin JavaScript |
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.
<div class="gr-subnav" data-cis-secondary="v1"><div class="container gr-subnav__inner"><a class="gr-subnav__nombre" href="#producto">Mapas</a><details class="gr-subnav__menu" open><summary>Explorar</summary><nav aria-label="Navegación de Mapas"><a href="#seccion-0" aria-current="page">Explorar</a><a href="#seccion-1">Capas</a><a href="#seccion-2">Leyenda</a><a href="#seccion-3">Fuentes</a><a href="#seccion-4">Método</a><a href="#seccion-5">Descargas</a><a href="#seccion-6">Ayuda</a></nav></details></div></div>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<div class="gr-subnav border border-slate-300 bg-white p-4 text-slate-950" data-cis-secondary="v1"><div class="container gr-subnav__inner"><a class="gr-subnav__nombre underline underline-offset-4" href="#producto">Mapas</a><details class="gr-subnav__menu" open><summary>Explorar</summary><nav class="flex flex-wrap items-center gap-3" aria-label="Navegación de Mapas"><a class="underline underline-offset-4" href="#seccion-0" aria-current="page">Explorar</a><a class="underline underline-offset-4" href="#seccion-1">Capas</a><a class="underline underline-offset-4" href="#seccion-2">Leyenda</a><a class="underline underline-offset-4" href="#seccion-3">Fuentes</a><a class="underline underline-offset-4" href="#seccion-4">Método</a><a class="underline underline-offset-4" href="#seccion-5">Descargas</a><a class="underline underline-offset-4" href="#seccion-6">Ayuda</a></nav></details></div></div>Código REACT
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
export interface SecondaryNavLink {
href: string;
label: string;
current?: boolean;
}
export interface SecondaryNavProps {
productName: string;
productHref: string;
/** Hasta siete destinos, en su orden de navegación. */
links: SecondaryNavLink[];
label?: string;
menuLabel?: string;
className?: string;
}
/** Barra del producto. chrome.js la pliega bajo 56 rem; details funciona sin JS. */
export function SecondaryNav({ productName, productHref, links, label, menuLabel, className }: SecondaryNavProps) {
if (links.length > 7) throw new RangeError("La barra secundaria admite hasta siete destinos.");
const title = menuLabel ?? links.find(link => link.current)?.label ?? "Secciones";
return (
<div className={["gr-subnav", className].filter(Boolean).join(" ")} data-cis-secondary="v1">
<div className="container gr-subnav__inner">
<a className="gr-subnav__nombre" href={productHref}>{productName}</a>
{links.length ? <details className="gr-subnav__menu" open>
<summary>{title}</summary>
<nav aria-label={label ?? `Navegación de ${productName}`}>
{links.map(link => <a key={link.href} href={link.href} aria-current={link.current ? "page" : undefined}>{link.label}</a>)}
</nav>
</details> : null}
</div>
</div>
);
}