Navegación y secciones

Cuándo usar

Usa CrmInsetTabSwitcher para pocas vistas o categorías relacionadas. El consumidor controla la vista activa; la navegación de páginas debe mantener URL e historial cuando corresponda.

Propiedades y variantes

Estados y accesibilidad

Mantén nombres legibles y prueba teclado, selección y desbordamiento en móvil. Distingue selección de contexto de navegación a otra página.

Evitar

No recrees grupos de píldoras con recetas locales ni ocultes secciones sin actualizar el contexto visible.

Submenú de landings de producto

ProductLandingHeader presenta la cabecera principal y reserva su espacio. ProductLandingSubmenu se coloca después del hero completo, incluido su carrusel al hacer scroll, y antes de las secciones. Ambos se importan desde @modules/marketing/product-landing-layout.

El submenú conserva su superficie oscura, navegación activa y menú móvil. Tiene 24 px de margen vertical (40 px desde sm) y se adhiere a 68 px del borde superior, debajo del header principal. Mantén hero, submenú y secciones como hermanos en el contenedor de la página; un wrapper corto limitaría el recorrido de sticky.

La barra mide 80 px en reposo y se compacta a 56 px, con una transición de 300 ms, cuando alcanza la cabecera. Al volver hacia el hero recupera su altura. El frame reserva 80 px para evitar saltos de contenido durante la animación; su zona transparente deja pasar los clics. El estado depende del anclaje real del submenú, no del scroll inicial de la página. Con movimiento reducido la transición es inmediata. Los enlaces de sección descuentan la altura compacta de destino.

ProductLandingHeroFrame ocupa como mínimo el alto disponible de la primera pantalla: descuenta únicamente 16 px del contenedor, 80 px de la cabecera y 24 px de padding vertical (40 px desde sm). Conserva un mínimo de 600 px y permite que el contenido crezca en móvil. El submenú y su margen empiezan después de ese bloque; no se descuentan del hero ni asoman parcialmente al cargar.

<div>
  <ProductLandingHeader
    productLabel="Finance"
    docsHref="/docs"
    docsVersion="v1.0"
  />
  <ProductLandingHeroFrame>
    <div className="relative lg:h-full">Contenido del hero</div>
  </ProductLandingHeroFrame>
  <ProductLandingSubmenu
    productLabel="Finance"
    navItems={financeNavItems}
    docsHref="/docs"
  />
  <MarketingFeatureGrid {...featureProps} />
</div>

En MarketingShell, pasa el hero por la prop hero; el shell coloca automáticamente el submenú entre ese hero y children cuando recibe navItems y moduleLabel. Este patrón se comparte entre CRM, Platform, Finance, HR y Events.

Carrusel fijado con transiciones completas

CrmScrollHero activa screenshotTransition="scroll" en ProductScrollHero. Se conserva el recorrido sticky original: 240 svh en móvil, 270 svh desde sm y 300 svh en escritorio para mantener el carrusel fijo durante los tres slides. La posición dentro del recorrido selecciona un índice entero. Cada cambio de índice anima la captura hasta su destino durante 500 ms; los píxeles recorridos con el scroll no mueven parcialmente la imagen. Tras 180 ms sin desplazamiento ni gesto activo, se alinea con el siguiente screenshot al bajar o el anterior al subir. La alineación se completa con una animación de 280 ms controlada por frames y puede interrumpirse con un nuevo gesto; no dispara un segundo avance al terminar. Se conserva la dirección ante eventos tardíos del trackpad, aunque no generen desplazamiento adicional. El scroll real activa el ajuste sin exigir un evento wheel previo; una posición intermedia restaurada se alinea al centro más cercano.

El índice seleccionado anima el MotionValue de CrmHeroCarousel.scrollPosition, sin vincular la posición de la imagen a cada píxel del scroll. Los extremos del recorrido dejan reposar la primera y última imagen, y los botones de área llevan al centro de cada screenshot. El contador, área seleccionada y textos laterales siguen la imagen predominante. El ajuste solo actúa dentro del tramo fijado y entre centros de screenshots: los extremos quedan libres para entrar y salir del carrusel. Respeta rueda, trackpad, teclado y gestos táctiles; los clics de navegación conservan su destino. Con movimiento reducido la alineación y los cambios de imagen son inmediatos. La variante por defecto sigue siendo fade; Finance y HR conservan su presentación actual.

<ProductScrollHero
  slides={crmHeroSlides}
  areas={crmHeroAreas}
  editorials={editorialSlides}
  productLabel="CRM"
  screenshotTransition="scroll"
>
  <div>Introducción del producto</div>
</ProductScrollHero>

Timeline vertical del carrusel CRM

CrmHeroCarousel usa areaLayout="vertical" en el recorrido de CRM. Reutiliza HeroAreaNavigation para mostrar las vistas de reportes y pipeline en una columna a la izquierda del screenshot, unidos de arriba hacia abajo y con una flecha que refuerza el sentido del recorrido. El paso activo sigue la diapositiva seleccionada; cada botón conserva su navegación directa y declara aria-current="step" cuando aplica.

En móvil, la columna ocupa 48 px y muestra iconos con nombres accesibles. Desde sm ocupa 144 px y muestra cada icono centrado con su etiqueta centrada debajo. La línea y la flecha comparten ese eje central; las etiquetas cubren la línea para mantener la legibilidad. El screenshot conserva el marco compartido y se adapta al espacio disponible, sin superponerse al timeline. Ambos paneles comparten una fila de grid con estiramiento vertical: sus bordes superior e inferior coinciden. El timeline distribuye los pasos en filas de igual altura y la línea conecta sus centros, adaptándose al alto del screenshot. Las variantes centered y split mantienen la navegación horizontal existente. La demo interactiva de esta página permite seleccionar los tres pasos verticales.

Al cargar CRM, la captura aparece centrada, con el título, contador y timeline ocultos. Pasados 36 px de scroll, se desplaza a la derecha durante 700 ms; el título y timeline aparecen durante 500 ms con 300 ms de retraso. Volver al inicio revierte la transición. El marco mantiene su tamaño y el hero conserva sus márgenes exteriores, con 144 px de superposición del carrusel. CrmHeroCarousel.areaNavigationVisible controla esta presentación y se propaga a HeroAreaNavigation.visible: mientras está oculto, el timeline es inert y queda fuera del árbol accesible. Movimiento reducido elimina las transiciones y su retraso. La demo permite alternar la visibilidad para comprobar esos estados.

<HeroAreaNavigation
  areas={crmHeroAreas}
  activeIndex={activeIndex}
  onSelect={selectSlide}
  label="Áreas de CRM"
  layout="vertical"
/>

El recorrido CRM aprovecha la altura liberada por el timeline horizontal: el bloque sticky comienza a 88 px (cabecera más separación) y calcula el tamaño del screenshot con el alto de pantalla disponible, reservando solo título, contador, marco y pista de scroll. En escritorio, los textos laterales y el carrusel usan columnas de grid independientes para ampliar la imagen sin solapar contenido. La imagen conserva su proporción; timeline y marco mantienen el mismo alto. El bloque de captura, título, timeline y pista de scroll usa el mismo centrado vertical desde el inicio, sobre el mismo eje que los textos laterales. No cambia de alineación al alcanzar o abandonar el tramo sticky. useScrollHeroLayout mide el espacio superior de ese centrado y lo descuenta del margen del track, conservando los 144 px de superposición inicial. Se actualiza al cambiar el tamaño del contenido o de la pantalla, sin medir en cada evento de scroll. En móvil, los textos compactos reservan su espacio mientras están ocultos e inertes para que su aparición tampoco cambie la posición de la captura.