---
title: "Collection"
description: "The Collection a Manifest is in, described and its members listed, and a menu of its members to move between them."
url: https://clover.iiif.library.northwestern.edu/docs/collection
version: "4"
---

# Collection

\<Clover.Collection /> (web components: \<clover-collection>)13 kB added to a page with a Root, gzipped (web components: 32 kB added to a page with a \<clover-root>, styles included, gzipped)

The Collection a Manifest is in, with its members, and a menu to move between them.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent={url}>
  <Clover.Body />
  <Clover.Collection />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif">
  <clover-body></clover-body>
  <clover-collection></clover-collection>
</clover-root>
```

## API reference

**React**

### Collection

Inside a `Root`, it shows the Collection the Manifest was opened from, or else the first it is `partOf`, fetched as the part first shows: its label, summary and members (each with its date, its `navDate`, and its summary under its label, where it gives them), then its homepage and address. Choosing a member shows it. Its other props, and its `ref`, go to its element.

| Prop           | Type     | Default | Description                                               |
| -------------- | -------- | ------- | --------------------------------------------------------- |
| `headingLevel` | `number` | `3`     | Its headings’ level, one below the heading it sits under. |
| `className`    | `string` | —       | Added to `clover-about clover-collection`.                |

### CollectionSelect

Inside a `Root`, it is a menu of the Collection’s members, labeled by the Collection: choosing a Manifest shows it, and choosing a Collection enters it. By keyboard, the arrows move through the members and Enter shows one; Escape, or leaving the menu, takes the step back. It renders nothing without a Collection of two or more. Its other props, and its `ref`, go to its element.

| Prop        | Type                   | Default | Description                                           |
| ----------- | ---------------------- | ------- | ----------------------------------------------------- |
| `onChange`  | `(id: string) => void` | —       | A member was chosen: its `id`, before the Root moves. |
| `className` | `string`               | —       | Added to `clover-collection-select`.                  |

**Web components**

### `<clover-collection>`

The Collection the Manifest was reached through: its label, summary and members, each to open, its homepage and its address.

| Name            | Type     | Default | Description                                                                                               |
| --------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------- |
| `heading-level` | `number` | `3`     | The level of its titles, one under the heading it sits beneath. Past 6, each names what it heads instead. |

### `<clover-collection-select>`

A menu of the Collection's members, choosing the Manifest shown. A key steps through it and Enter opens the one stepped to.

| Name            | Type                     | Default | Description                                            |
| --------------- | ------------------------ | ------- | ------------------------------------------------------ |
| `clover-change` | `{ manifestId: string }` | —       | An event. A member was chosen, before Clover opens it. |

## Examples

### A Manifest’s Collection

Given a Manifest, it fetches the first Collection the Manifest is `partOf`: here, Northwestern’s bicycle catalogs, in a box that scrolls.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <Clover.Body />
  <Clover.Collection style={{ maxHeight: "24rem", overflowY: "auto" }} />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-body></clover-body>
  <clover-collection
    style="max-height: 24rem; overflow-y: auto"></clover-collection>
</clover-root>
```

### A menu of members

Use `CollectionSelect` (web components: `<clover-collection-select>`) for a menu of the members, to move between them.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif">
  <Clover.Body />
  <Clover.CollectionSelect />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif">
  <clover-body></clover-body>
  <clover-collection-select></clover-collection-select>
</clover-root>
```

### In the Viewer

The Viewer’s Panel shows it as its Collection section, for a Manifest opened from a Collection or `partOf` one.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Viewer iiifContent="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif" />
```

**Web components**

```html
<clover-viewer
  iiif-content="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif"></clover-viewer>
```

## Previous versions

[Clover 3.x › Composing](https://clover.iiif.library.northwestern.edu/docs/3.x/composing)

- `Collection` (web components: `<clover-collection>`) reads the Manifest’s `partOf` itself, and fetches it.
- The Slider’s links to members are [`Items` (web components: `<clover-items>`)](https://clover.iiif.library.northwestern.edu/docs/items#a-collection) on its own.
- The 3.x Viewer’s menu of Manifests is `CollectionSelect` (web components: `<clover-collection-select>`).