--- meta: title: Thumbnail Group description: Lays a set of thumbnails out as a single scrollable row, with a Show All toggle that expands them into a wrapping grid. layout: component --- A thumbnail group holds [thumbnails](/components/thumbnail) in one horizontally scrollable row. When they don't all fit, a **Show All** toggle appears in the header; expanding drops the single-row restriction and reflows everything into a wrapping grid. **Show Less** rolls it back to the row. ```html:preview

``` The toggle is only rendered when it's needed — a group whose thumbnails already fit shows no toggle at all. ```html:preview

``` ## Examples ### Thumbnail Size and Shape `thumbnail-width` sets the row's track width and, when expanded, the minimum column width the grid packs against. `gap` sets the spacing between thumbnails, and `aspect-ratio` reshapes every thumbnail in the group. ```html:preview

``` Those three attributes are shorthand for `--zn-thumbnail-width`, `--zn-thumbnail-gap` and `--zn-thumbnail-aspect-ratio`, which you can set on the group directly instead. Because [thumbnail](/components/thumbnail)'s custom properties all inherit, **any** of them — chip colours, corner radii, preview sizing — can be set once on the group and will apply to every thumbnail in it. ```html:preview

``` ### Preview Give the thumbnails a `full-uri` and clicking one opens a full-screen preview that grows out of its position in the row. The preview opens in the browser's top layer, so it escapes the scrolling row instead of being clipped by it. See [thumbnail](/components/thumbnail#preview) for the trigger options. ```html:preview

``` ### Selection Add `selectable` and the group tracks a single selection for you: clicking a thumbnail moves the accent ring, updates the group's `value`, and emits `zn-change`. A thumbnail marked `selected` in markup becomes the starting value. ```html:preview

``` ### Counting a Larger Set When the row only holds the first page of a much larger set, set `total` so the toggle advertises the real size. The toggle appears whenever `total` exceeds the number of slotted thumbnails, even if those all fit. Listen for `zn-expand` to fetch and append the rest. ```html:preview

``` ### Custom Labels Override `show-all-label` and `show-less-label` for wording that suits the content. The count is appended to the expand label in brackets. ```html:preview

``` ### Header Actions The `actions` slot sits in the header before the toggle. ```html:preview

Upload

``` ### Always Showing the Toggle `always-toggle` keeps the toggle on screen even when everything already fits — useful when the row is one of several sibling groups and you want the headers to line up. `hide-toggle` does the opposite and suppresses it entirely, leaving a plain scrolling row. ```html:preview

``` ### Starting Expanded Set `expanded` to open the grid on first paint, or call `show()` / `hide()` to drive it from script. ```html:preview

```