---
title: "Exemplos de menu de rolagem horizontal do React — ao vivo, com código"
description: "Exemplos do react-horizontal-scrolling-menu: setas, arrastar para rolar, abas roláveis, RTL, vertical, loop infinito, autoplay — cada um com fonte pronta para copiar e colar."
canonical: "https://react-horizontal-scrolling-menu.dev/pt-br/examples"
---

# Exemplos: cada padrão, ao vivo, com a fonte completa

> Cada exemplo é uma demo funcional do pacote npm publicado mais o arquivo completo por trás dela: pronto para copiar e colar, e editável ao vivo no Storybook. Renderizado no servidor como tudo mais neste site.

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

---

## Básico

- [Primeiros passos](https://react-horizontal-scrolling-menu.dev/pt-br/examples/simple.md) — O menu mínimo: itens, duas setas, visibilidade pronta para usar.
- [Um item por visão](https://react-horizontal-scrolling-menu.dev/pt-br/examples/one-item.md) — Um menu com a largura de um item — um cartão preenche a linha.
- [Rolar um item por vez](https://react-horizontal-scrolling-menu.dev/pt-br/examples/one-item-scroll.md) — As setas avançam um único item em vez de uma página inteira.
- [Setas abaixo do menu](https://react-horizontal-scrolling-menu.dev/pt-br/examples/bottom-arrows.md) — As setas são seus componentes — coloque-as onde quiser.

## Posição e rolagem

- [Centralizar o item clicado](https://react-horizontal-scrolling-menu.dev/pt-br/examples/center-on-click.md) — scrollToItem com inline: center — o padrão de abas roláveis.
- [Rolar até um item por id](https://react-horizontal-scrolling-menu.dev/pt-br/examples/scroll-to-item.md) — Acesse o menu de fora com apiRef.
- [Salvar e restaurar a posição de rolagem](https://react-horizontal-scrolling-menu.dev/pt-br/examples/save-restore-position.md) — Mantenha o deslocamento de rolagem entre desmontagens e recargas.
- [Animação de rolagem personalizada](https://react-horizontal-scrolling-menu.dev/pt-br/examples/custom-transition.md) — Traga seu próprio easing e duração para rolagens programáticas.
- [Indicador de progresso de rolagem](https://react-horizontal-scrolling-menu.dev/pt-br/examples/progress.md) — Uma barra de progresso guiada por quais itens estão visíveis.

## Entrada e gestos

- [Arrastar para rolar com o mouse](https://react-horizontal-scrolling-menu.dev/pt-br/examples/mouse-drag.md) — Arraste com o mouse que ainda deixa os cliques funcionarem.
- [Deslizar no desktop](https://react-horizontal-scrolling-menu.dev/pt-br/examples/swipe-desktop.md) — Deslize com inércia para usuários de mouse.
- [Ocultar as setas no mobile](https://react-horizontal-scrolling-menu.dev/pt-br/examples/mobile-swipe-only.md) — Rolagem apenas por toque em telas pequenas, setas no desktop.
- [Impedir a rolagem do body](https://react-horizontal-scrolling-menu.dev/pt-br/examples/prevent-body-scroll.md) — A roda sobre o menu rola o menu, não a página.

## Itens dinâmicos

- [Carregar mais quando o fim aparece](https://react-horizontal-scrolling-menu.dev/pt-br/examples/add-items.md) — Acréscimo infinito guiado pela visibilidade do último item.
- [Adicionar um item e rolar até ele](https://react-horizontal-scrolling-menu.dev/pt-br/examples/add-item-and-scroll-to-it.md) — O padrão de chips de filtro: adicionar e então trazer à vista.
- [Animar itens ao entrar e sair](https://react-horizontal-scrolling-menu.dev/pt-br/examples/items-animation.md) — Animações de adicionar/remover com @formkit/auto-animate.
- [5.000 itens e ainda rápido](https://react-horizontal-scrolling-menu.dev/pt-br/examples/performance.md) — A rolagem nativa escala — sem necessidade de virtualização aqui.

## Layout

- [Menu vertical](https://react-horizontal-scrolling-menu.dev/pt-br/examples/vertical.md) — O mesmo menu, rolando de cima para baixo.
- [Da direita para a esquerda](https://react-horizontal-scrolling-menu.dev/pt-br/examples/rtl.md) — RTL inverte a direção; as setas e a paginação seguem.

## Receitas

- [Loop infinito](https://react-horizontal-scrolling-menu.dev/pt-br/examples/infinite-loop.md) — Loop contínuo a partir da API pública — sem mudanças na biblioteca.
- [Autoplay](https://react-horizontal-scrolling-menu.dev/pt-br/examples/autoplay.md) — Um loop que avança sozinho com pausa acessível.

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