---
title: "Exemples de menu à défilement horizontal React — en direct, avec le code"
description: "Exemples de react-horizontal-scrolling-menu : flèches, glisser pour défiler, onglets défilables, RTL, vertical, boucle infinie, lecture automatique — chacun avec sa source à copier-coller."
canonical: "https://react-horizontal-scrolling-menu.dev/fr/examples"
---

# Exemples : chaque motif, en direct, avec la source complète

> Chaque exemple est une démo fonctionnelle du paquet npm publié plus le fichier complet qui se trouve derrière : prêt à copier-coller, et modifiable en direct dans Storybook. Rendu côté serveur comme tout le reste de ce site.

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

---

## Bases

- [Démarrage](https://react-horizontal-scrolling-menu.dev/fr/examples/simple.md) — Le menu minimal : éléments, deux flèches, visibilité prête à l’emploi.
- [Un élément par vue](https://react-horizontal-scrolling-menu.dev/fr/examples/one-item.md) — Un menu de la largeur d’un élément — une carte remplit la rangée.
- [Défiler un élément à la fois](https://react-horizontal-scrolling-menu.dev/fr/examples/one-item-scroll.md) — Les flèches avancent d’un seul élément au lieu d’une page entière.
- [Flèches sous le menu](https://react-horizontal-scrolling-menu.dev/fr/examples/bottom-arrows.md) — Les flèches sont vos composants — placez-les où vous voulez.

## Position et défilement

- [Centrer l’élément cliqué](https://react-horizontal-scrolling-menu.dev/fr/examples/center-on-click.md) — scrollToItem avec inline: center — le motif des onglets défilables.
- [Défiler vers un élément par id](https://react-horizontal-scrolling-menu.dev/fr/examples/scroll-to-item.md) — Accédez au menu depuis l’extérieur avec apiRef.
- [Sauvegarder et restaurer la position de défilement](https://react-horizontal-scrolling-menu.dev/fr/examples/save-restore-position.md) — Gardez le décalage de défilement entre démontages et rechargements.
- [Animation de défilement personnalisée](https://react-horizontal-scrolling-menu.dev/fr/examples/custom-transition.md) — Apportez votre propre easing et durée pour les défilements programmatiques.
- [Indicateur de progression du défilement](https://react-horizontal-scrolling-menu.dev/fr/examples/progress.md) — Une barre de progression pilotée par les éléments visibles.

## Entrée et gestes

- [Glisser pour défiler à la souris](https://react-horizontal-scrolling-menu.dev/fr/examples/mouse-drag.md) — Un glisser à la souris qui laisse les clics fonctionner.
- [Balayer sur ordinateur](https://react-horizontal-scrolling-menu.dev/fr/examples/swipe-desktop.md) — Un balayage avec inertie pour les utilisateurs de souris.
- [Masquer les flèches sur mobile](https://react-horizontal-scrolling-menu.dev/fr/examples/mobile-swipe-only.md) — Défilement au seul toucher sur petits écrans, flèches sur ordinateur.
- [Empêcher le défilement du body](https://react-horizontal-scrolling-menu.dev/fr/examples/prevent-body-scroll.md) — La molette sur le menu fait défiler le menu, pas la page.

## Éléments dynamiques

- [Charger plus quand la fin apparaît](https://react-horizontal-scrolling-menu.dev/fr/examples/add-items.md) — Ajout infini piloté par la visibilité du dernier élément.
- [Ajouter un élément et défiler vers lui](https://react-horizontal-scrolling-menu.dev/fr/examples/add-item-and-scroll-to-it.md) — Le motif des puces de filtre : ajouter, puis amener à la vue.
- [Animer les éléments à l’entrée et à la sortie](https://react-horizontal-scrolling-menu.dev/fr/examples/items-animation.md) — Animations d’ajout/suppression avec @formkit/auto-animate.
- [5 000 éléments et toujours rapide](https://react-horizontal-scrolling-menu.dev/fr/examples/performance.md) — Le défilement natif s’adapte — pas besoin de virtualisation ici.

## Disposition

- [Menu vertical](https://react-horizontal-scrolling-menu.dev/fr/examples/vertical.md) — Le même menu, défilant de haut en bas.
- [De droite à gauche](https://react-horizontal-scrolling-menu.dev/fr/examples/rtl.md) — RTL inverse la direction ; les flèches et la pagination suivent.

## Recettes

- [Boucle infinie](https://react-horizontal-scrolling-menu.dev/fr/examples/infinite-loop.md) — Boucle continue depuis l’API publique — sans changement dans la bibliothèque.
- [Lecture automatique](https://react-horizontal-scrolling-menu.dev/fr/examples/autoplay.md) — Une boucle qui avance seule avec une pause accessible.

---
More examples: <https://react-horizontal-scrolling-menu.dev/fr/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>