Scroll Buttons

The built-in scrollbuttons tag — a horizontal scroller with prev/next chevron buttons for paging a wide row of content. Usage, options, and live examples.

scrollbuttons is a horizontal scroller with prev/next buttons. The block body is a wide row of content that scrolls sideways, and chevron controls fade in at each edge so a reader can page through it a screenful at a time. The controls only show when there is more content to reach in that direction, and the row can also be dragged with the pointer. It is the right tool for a strip of cards, a row of images, or any rail too wide for the page.

This is a different widget from scroller, which is a plain native-overflow box with the browser’s own scrollbars — scrollbuttons adds the paging chevron controls.

Use it as {% scrollbuttons %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'scrollbuttons', …).

Demonstrations

The block body is the scrolling row; give the children enough width to overflow so the controls have something to page to. scrollAmount sets how many pixels each chevron click moves:

Pin both controls on with showStartControl / showEndControl (so they show even at the ends), and controlSize resizes the chevron buttons:

Attributes

Omit any attribute to take its default.

attr={...} forwards raw HTML attributes onto the rendered element.

CSS Selectors

Each scrollbuttons mounts as an island, so its outer wrapper carries data-aardvark-island="Scroller" — a stable hook independent of Mantine’s hashed class names. Inside, the native Scroller exposes its Styles API parts as mantine-Scroller-* classes: root is the component, container the clipping frame, content the scrolling track that holds the children, control each chevron button, and chevron the icon within a control.

/* The island wrapper — the most stable selector. */
[data-aardvark-island="Scroller"] {
  margin-block: 1rem;
}

/* Mantine Styles API parts. */
.mantine-Scroller-root {}
.mantine-Scroller-container {}
.mantine-Scroller-content {}      /* the scrolling track of children */
.mantine-Scroller-control {       /* the prev / next chevron buttons */
  background: var(--mantine-color-body);
}
.mantine-Scroller-chevron {}      /* the icon inside a control */

Injecting Attributes

attr={...} passes raw HTML attributes straight onto the rendered element — handy for ids, data hooks, ARIA, or inline handlers the macro doesn’t expose as named options. Pass a dictionary literal; every key/value lands verbatim on the element.

Below, an injected onclick reports the element’s text content when the row is clicked: