Menu Setup

npm install react-horizontal-scrolling-menu

import React from 'react';
import {
  ScrollMenu,
  VisibilityContext,
  type publicApiType,
} from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';

const items = Array.from({ length: 10 }, (_, i) => `item-${i + 1}`);

export function App() {
  return (
    <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
      {items.map((id) => (
        <Card itemId={id} key={id} title={id} />
      ))}
    </ScrollMenu>
  );
}

function LeftArrow() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const disabled = api.useLeftArrowVisible();
  return (
    <button disabled={disabled} onClick={() => api.scrollPrev()}>
      ←
    </button>
  );
}

function RightArrow() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const disabled = api.useRightArrowVisible();
  return (
    <button disabled={disabled} onClick={() => api.scrollNext()}>
      →
    </button>
  );
}

function Card({ itemId, title }: { itemId: string; title: string }) {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const visible = api.useIsVisible(itemId, true);
  return (
    <div style={{ width: '160px' }} data-visible={visible}>
      {title}
    </div>
  );
}

import React from 'react';
import {
  ScrollMenu,
  VisibilityContext,
  type publicApiType,
} from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';

function EndIndicator() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const atEnd = api.useIsVisible('last', false);
  return <span>{atEnd ? 'End of list' : 'Scroll for more'}</span>;
}

function Chip({ label }: { itemId: string; label: string }) {
  return <div style={{ width: '120px' }}>{label}</div>;
}

export function MenuWithChrome({ ids }: { ids: string[] }) {
  return (
    <ScrollMenu Header={<h2>Categories</h2>} Footer={EndIndicator}>
      {ids.map((id) => (
        <Chip itemId={id} key={id} label={id} />
      ))}
    </ScrollMenu>
  );
}

import { ScrollMenu } from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';

function ProductCard({ name }: { itemId: string; name: string }) {
  return <div style={{ width: '160px' }}>{name}</div>;
}

function ProductRow({
  products,
}: {
  products: { sku: string; name: string }[];
}) {
  const ids = products.map((p) => String(p.sku));
  if (process.env.NODE_ENV !== 'production') {
    console.assert(
      new Set(ids).size === ids.length,
      'ScrollMenu: duplicate itemId values — visibility tracking will break silently',
    );
  }
  return (
    <ScrollMenu>
      {products.map((p) => (
        <ProductCard itemId={p.sku} key={p.sku} name={p.name} />
      ))}
    </ScrollMenu>
  );
}

/* menu.css */

/* 1. Fixed item width — always px/rem, never percent */
.card {
  width: 160px;
}

/* 2. Spacing between items: gap on the scroll container
      (or margin on your item component). There is NO gap/separator prop —
      separator elements were removed in v7. */
.react-horizontal-scrolling-menu--scroll-container {
  gap: 8px;
}

/* 3. Hide the native scrollbar */
.react-horizontal-scrolling-menu--scroll-container {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}
.react-horizontal-scrolling-menu--scroll-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

import 'react-horizontal-scrolling-menu/dist/styles.css';
import './menu.css';

import { ScrollMenu } from 'react-horizontal-scrolling-menu';
// no CSS import — items stack vertically, nothing scrolls

import { ScrollMenu } from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';

<ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
  {items.map((it) => (
    <Card itemID={it.id} key={it.id} />
  ))}
</ScrollMenu>

<ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
  {items.map((it) => (
    <Card itemId={it.id} key={it.id} />
  ))}
</ScrollMenu>