---
title: "PartOf"
description: "A IIIF resource's partOf, the Collections it belongs to, as a list of links, each named by its label."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/part-of
version: "4"
---

# PartOf

\<Clover.PartOf /> (web components: \<clover-part-of>)0.7 kB added to a page with a Root, gzipped (web components: 7 kB added to a page with a \<clover-root>, styles included, gzipped)

The Collections the resource belongs to, as a list of links.

> **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.PartOf />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-part-of></clover-part-of>
</clover-root>
```

## API reference

Reads `partOf` from the Root’s resource and renders a `ul`: a link to each Collection, named by its label or else its address. It renders nothing while there is none, and its other props go to the `ul`. A link opens the Collection’s IIIF JSON: to show the Collection itself, use [`Collection` (web components: `<clover-collection>`)](https://clover.iiif.library.northwestern.edu/docs/collection).

**React**

| Prop        | Type                      | Default      | Description                                                     |
| ----------- | ------------------------- | ------------ | --------------------------------------------------------------- |
| `of`        | `"manifest" \| "canvas"`  | `"manifest"` | Whose `partOf`: the resource’s, or the Canvas the reader is on. |
| `value`     | `{ id, label, format }[]` | —            | Collections to show instead of the Root’s, as IIIF gives them.  |
| `className` | `string`                  | —            | Added to `clover-part-of`.                                      |

**Web components**

### `<clover-part-of>`

Part of: the Collections the resource belongs to, as a list of links.

| Name     | Type                                                                                         | Default    | Description                                                                                  |
| -------- | -------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------- |
| `of`     | `"manifest" \| "canvas"`                                                                     | `manifest` | Whose property: the Manifest's, or the Canvas in view's.                                     |
| `value`  | `string (a URL or JSON)`                                                                     | —          | Collections, instead of the root's: as text, a URL or JSON. Outside a root, the one to show. |
| `.value` | `string \| Array<{ id: string; label?: Record<string, string[]>; format?: string }> \| null` | —          | As a property: Collections, instead of the root's.                                           |

## Examples

### Outside a Root

Give it `value`, the Collections as IIIF gives them, and it needs no `Root` (web components: `<clover-root>`).

> **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.PartOf
  value={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif",
      type: "Collection",
      label: { none: ["Commedia dell'Arte: The Masks of Antonio Fava"] },
    },
  ]}
/>
```

**Web components**

```html
<clover-part-of
  value='[{"id":"https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif","type":"Collection","label":{"none":["Commedia dell&apos;Arte: The Masks of Antonio Fava"]}}]'></clover-part-of>
```

### Without a label

A Collection without a label is named by its address. Its address wraps, with nowhere else to break, rather than pushing the page sideways.

> **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.PartOf
  value={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/collections/0ba3a256-4952-44ea-b0d9-0772835ff137?as=iiif",
      type: "Collection",
    },
  ]}
/>
```

**Web components**

```html
<clover-part-of
  value='[{"id":"https://api.dc.library.northwestern.edu/api/v2/collections/0ba3a256-4952-44ea-b0d9-0772835ff137?as=iiif","type":"Collection"}]'></clover-part-of>
```

## Previous versions

[Clover 3.x › PartOf](https://clover.iiif.library.northwestern.edu/docs/deprecated-versions/partOf)

- `partOf` is `value`: inside a `Root` (web components: `<clover-root>`), leave it out.
- Always a `ul`: no `as`.
- 3.x’s `lang` is the Root’s `language`.