---
title: "Ejemplos de menú de desplazamiento horizontal de React — en vivo, con código"
description: "Ejemplos de react-horizontal-scrolling-menu: flechas, arrastrar para desplazarse, pestañas desplazables, RTL, vertical, bucle infinito, autoplay — cada uno con fuente lista para copiar y pegar."
canonical: "https://react-horizontal-scrolling-menu.dev/es/examples"
---

# Ejemplos: cada patrón, en vivo, con la fuente completa

> Cada ejemplo es una demo funcional del paquete npm publicado más el archivo completo que la respalda: listo para copiar y pegar, y editable en vivo en Storybook. Renderizado en el servidor como todo lo demás de este sitio.

Links below point at the Markdown of each example; drop the `.md` for the rendered page.

---

## Básicos

- [Primeros pasos](https://react-horizontal-scrolling-menu.dev/es/examples/simple.md) — El menú mínimo: elementos, dos flechas, visibilidad lista para usar.
- [Un elemento por vista](https://react-horizontal-scrolling-menu.dev/es/examples/one-item.md) — Un menú del ancho de un elemento: una tarjeta llena la fila.
- [Desplazarse de un elemento en uno](https://react-horizontal-scrolling-menu.dev/es/examples/one-item-scroll.md) — Las flechas avanzan un solo elemento en lugar de una página completa.
- [Flechas debajo del menú](https://react-horizontal-scrolling-menu.dev/es/examples/bottom-arrows.md) — Las flechas son tus componentes: colócalas donde quieras.

## Posición y desplazamiento

- [Centrar el elemento clicado](https://react-horizontal-scrolling-menu.dev/es/examples/center-on-click.md) — scrollToItem con inline: center — el patrón de pestañas desplazables.
- [Desplazarse a un elemento por id](https://react-horizontal-scrolling-menu.dev/es/examples/scroll-to-item.md) — Llega al menú desde fuera con apiRef.
- [Guardar y restaurar la posición de desplazamiento](https://react-horizontal-scrolling-menu.dev/es/examples/save-restore-position.md) — Mantén el desplazamiento entre desmontajes y recargas de página.
- [Animación de desplazamiento personalizada](https://react-horizontal-scrolling-menu.dev/es/examples/custom-transition.md) — Trae tu propio easing y duración para los desplazamientos programáticos.
- [Indicador de progreso de desplazamiento](https://react-horizontal-scrolling-menu.dev/es/examples/progress.md) — Una barra de progreso impulsada por qué elementos son visibles.

## Entrada y gestos

- [Arrastrar para desplazarse con el ratón](https://react-horizontal-scrolling-menu.dev/es/examples/mouse-drag.md) — Arrastre con el ratón que sigue dejando funcionar los clics.
- [Deslizar en escritorio](https://react-horizontal-scrolling-menu.dev/es/examples/swipe-desktop.md) — Deslizamiento con inercia para usuarios de ratón.
- [Ocultar las flechas en móvil](https://react-horizontal-scrolling-menu.dev/es/examples/mobile-swipe-only.md) — Desplazamiento solo táctil en pantallas pequeñas, flechas en escritorio.
- [Evitar el desplazamiento del body](https://react-horizontal-scrolling-menu.dev/es/examples/prevent-body-scroll.md) — La rueda sobre el menú desplaza el menú, no la página.

## Elementos dinámicos

- [Cargar más cuando aparece el final](https://react-horizontal-scrolling-menu.dev/es/examples/add-items.md) — Añadido infinito impulsado por la visibilidad del último elemento.
- [Añadir un elemento y desplazarse a él](https://react-horizontal-scrolling-menu.dev/es/examples/add-item-and-scroll-to-it.md) — El patrón de chips de filtro: añadir y luego traer a la vista.
- [Animar elementos al entrar y salir](https://react-horizontal-scrolling-menu.dev/es/examples/items-animation.md) — Animaciones de añadir/eliminar con @formkit/auto-animate.
- [5.000 elementos y sigue siendo rápido](https://react-horizontal-scrolling-menu.dev/es/examples/performance.md) — El desplazamiento nativo escala — aquí no hace falta virtualización.

## Diseño

- [Menú vertical](https://react-horizontal-scrolling-menu.dev/es/examples/vertical.md) — El mismo menú, desplazándose de arriba abajo.
- [De derecha a izquierda](https://react-horizontal-scrolling-menu.dev/es/examples/rtl.md) — RTL invierte la dirección; las flechas y la paginación le siguen.

## Recetas

- [Bucle infinito](https://react-horizontal-scrolling-menu.dev/es/examples/infinite-loop.md) — Bucle continuo desde la API pública — sin cambios en la biblioteca.
- [Autoplay](https://react-horizontal-scrolling-menu.dev/es/examples/autoplay.md) — Un bucle que avanza solo con comportamiento de pausa accesible.

---
More examples: <https://react-horizontal-scrolling-menu.dev/es/examples.md> · Library summary for LLMs: <https://react-horizontal-scrolling-menu.dev/llms.txt>
Package: `npm install react-horizontal-scrolling-menu` · MIT · <https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu>