Horizontal Scroll
betaA section that pins to the screen while its row of items slides sideways as the page scrolls down — driven by the page's own scroll, never taking it over.
- Effects & motion
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add horizontal-scrollNo npm packages are needed beyond what Dowel already requires.
import { HorizontalScroll } from "@/components/ui/horizontal-scroll";<HorizontalScroll>
| Prop | Type | Default |
|---|---|---|
label (required)What the row holds, e.g. "Case studies". Names the region for screen readers. | string | — |
gapSpace between items, in pixels. Default 24. | number | 24 |
pinPin the section and slide the row as the page scrolls. Default true; false keeps a plain scroller. | boolean | true |
trackClassNameClass for the row that holds the items. | string | — |
Plus every attribute of <section>.
<HorizontalScrollItem>
Plus every attribute of <div>.
A labelled region. Nothing listens to the wheel or takes over scrolling: the page scrolls vertically as always, and the row's offset is read from it. On the server, without JavaScript, under reduced motion or with pin={false} it is a plain horizontal scroller, focusable so the keyboard can scroll it. Pinned, focusing an item that is off to the side scrolls the page to the point where it is in view, so tabbing through the items always shows the one in focus.
7/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes