Navegación inferior.
Patrón canónico de navegación inferior 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
<nav class="ui-sample ui-bottom-nav" data-bottom-nav="true" aria-label="Navegación inferior"><a aria-current="page" href="#inicio">Inicio</a><a href="#buscar">Buscar</a><a href="#guardados">Guardados</a><a href="#cuenta">Ingresar</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.
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
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 inferior no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
- Cambio propuesto
- Publicar en r19 el contrato de Navegación inferior para Patrón canónico de navegación inferior para cis, cds, cochid y todos los sitios.
- Qué ocurre si respondes No
- Navegación inferior 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.
- Conserva el namebrand canónico y el contexto en una línea separada.
- Mantén cuenta, navegación y destino actual en lugares predecibles.
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.
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.
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.
<nav class="ui-sample ui-bottom-nav" data-bottom-nav="true" aria-label="Navegación inferior"><a aria-current="page" href="#inicio">Inicio</a><a href="#buscar">Buscar</a><a href="#guardados">Guardados</a><a href="#cuenta">Ingresar</a></nav>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<nav class="ui-sample ui-bottom-nav border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center gap-3" data-bottom-nav="true" aria-label="Navegación inferior"><a class="underline underline-offset-4" aria-current="page" href="#inicio">Inicio</a><a class="underline underline-offset-4" href="#buscar">Buscar</a><a class="underline underline-offset-4" href="#guardados">Guardados</a><a class="underline underline-offset-4" href="#cuenta">Ingresar</a></nav>Código REACT
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
export interface BottomNavItem {
label: string;
href: string;
/** Sección en la que está la persona; recibe `aria-current="page"`. */
current?: boolean;
}
export interface BottomNavProps {
/** Nombre accesible del `<nav>`. */
label?: string;
/** Destinos principales; la grilla está pensada para cuatro. */
items?: BottomNavItem[];
className?: string;
}
const BOTTOM_NAV_ITEMS: BottomNavItem[] = [
{ label: "Inicio", href: "#inicio", current: true },
{ label: "Buscar", href: "#buscar" },
{ label: "Guardados", href: "#guardados" },
{ label: "Ingresar", href: "#cuenta" },
];
/**
* Barra de navegación fija al pie de la pantalla en móvil, con los cuatro destinos principales de la aplicación.
*
* Marca la sección actual con `current`. Con sesión iniciada, el último destino suele pasar de «Ingresar» a «Cuenta».
*
* @example <BottomNav items={[{ label: "Inicio", href: "/", current: true }, { label: "Buscar", href: "/buscar" }, { label: "Guardados", href: "/guardados" }, { label: "Cuenta", href: "/cuenta" }]} />
*/
export function BottomNav({ label = "Navegación inferior", items = BOTTOM_NAV_ITEMS, className }: BottomNavProps) {
if (!items.length) return null;
return (
<nav className={["ui-bottom-nav", className].filter(Boolean).join(" ")} data-bottom-nav aria-label={label}>
{items.map((item, i) => (
<a key={i} aria-current={item.current ? "page" : undefined} href={item.href}>{item.label}</a>
))}
</nav>
);
}