---
title: "React horizontal scroll menu examples — live, with code"
description: "Examples of react-horizontal-scrolling-menu: arrows, drag to scroll, scrollable tabs, RTL, vertical, infinite loop, autoplay — each with copy-paste source."
canonical: "https://react-horizontal-scrolling-menu.dev/examples"
---

# Examples: every pattern, live, with the full source

> Each example is a working demo of the published npm package plus the complete file behind it — copy-paste ready, and editable live in Storybook. Server-rendered like everything else on this site.

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

---

## Basics

- [Getting started](https://react-horizontal-scrolling-menu.dev/examples/simple.md) — The minimal menu: items, two arrows, visibility out of the box.
- [One item per view](https://react-horizontal-scrolling-menu.dev/examples/one-item.md) — A single-item-wide menu — one card fills the row.
- [Scroll one item at a time](https://react-horizontal-scrolling-menu.dev/examples/one-item-scroll.md) — Arrows advance a single item instead of a full page.
- [Arrows below the menu](https://react-horizontal-scrolling-menu.dev/examples/bottom-arrows.md) — Arrows are your components — place them anywhere.

## Position & scrolling

- [Center the clicked item](https://react-horizontal-scrolling-menu.dev/examples/center-on-click.md) — scrollToItem with inline: center — the scrollable-tabs pattern.
- [Scroll to an item by id](https://react-horizontal-scrolling-menu.dev/examples/scroll-to-item.md) — Reach into the menu from outside with apiRef.
- [Save and restore scroll position](https://react-horizontal-scrolling-menu.dev/examples/save-restore-position.md) — Keep the scroll offset across unmounts and page reloads.
- [Custom scroll animation](https://react-horizontal-scrolling-menu.dev/examples/custom-transition.md) — Bring your own easing and duration for programmatic scrolls.
- [Scroll progress indicator](https://react-horizontal-scrolling-menu.dev/examples/progress.md) — A progress bar driven by which items are visible.

## Input & gestures

- [Drag to scroll with the mouse](https://react-horizontal-scrolling-menu.dev/examples/mouse-drag.md) — Mouse drag that still lets item clicks work.
- [Swipe on desktop](https://react-horizontal-scrolling-menu.dev/examples/swipe-desktop.md) — Momentum swiping for mouse users.
- [Hide arrows on mobile](https://react-horizontal-scrolling-menu.dev/examples/mobile-swipe-only.md) — Touch-only scrolling on small screens, arrows on desktop.
- [Prevent body scroll](https://react-horizontal-scrolling-menu.dev/examples/prevent-body-scroll.md) — Wheel over the menu scrolls the menu, not the page.

## Dynamic items

- [Load more when the end shows up](https://react-horizontal-scrolling-menu.dev/examples/add-items.md) — Infinite append driven by last-item visibility.
- [Add an item and scroll to it](https://react-horizontal-scrolling-menu.dev/examples/add-item-and-scroll-to-it.md) — The filter-chips pattern: append, then bring into view.
- [Animate items in and out](https://react-horizontal-scrolling-menu.dev/examples/items-animation.md) — Add/remove animations with @formkit/auto-animate.
- [5,000 items and still fast](https://react-horizontal-scrolling-menu.dev/examples/performance.md) — Native scrolling scales — no virtualization needed here.

## Layout

- [Vertical menu](https://react-horizontal-scrolling-menu.dev/examples/vertical.md) — The same menu, scrolling top to bottom.
- [Right-to-left](https://react-horizontal-scrolling-menu.dev/examples/rtl.md) — RTL flips direction; arrows and paging follow.

## Recipes

- [Infinite loop](https://react-horizontal-scrolling-menu.dev/examples/infinite-loop.md) — Seamless looping from the public API — no library changes.
- [Autoplay](https://react-horizontal-scrolling-menu.dev/examples/autoplay.md) — A self-advancing loop with accessible pause behavior.
- [Scrollable tabs beyond MUI](https://react-horizontal-scrolling-menu.dev/examples/mui-scrollable-tabs.md) — Keep MUI’s value/onChange contract; swap the strip underneath.
- [Scroll snap carousel](https://react-horizontal-scrolling-menu.dev/examples/scroll-snap.md) — Cards snap to the center and fan out in CSS — no carousel engine.

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