---
title: "Contents"
description: "A Manifest's table of contents from its Ranges, the entry the reader is in marked, each entry going to its Canvas."
url: https://clover.iiif.library.northwestern.edu/docs/contents
version: "4"
---

# Contents

\<Clover.Contents /> (web components: \<clover-contents>)6 kB added to a page with a Root, gzipped (web components: 22 kB added to a page with a \<clover-root>, styles included, gzipped)

A Manifest’s table of contents, from its Ranges, with the entry the reader is in marked.

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

**Web components**

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

## API reference

Inside a `Root` (web components: `<clover-root>`), it lists the Manifest’s Ranges (`structures`), nested as they nest, in a `nav` named “Contents”: choosing an entry goes to its Canvas, framed to its region or at its time, and the entry the reader is in is `aria-current`. An entry with entries under it opens and closes them by the button at the end of its row; they start closed, but for the entries holding the one the reader is in, open from the top down to it and set in bold, so the way to it shows. An entry in parts, columns or pages out of order, steps through them in its Range’s order while it is the current one, and the regions any Range names are drawn on the Canvas as annotations are. The entry the reader is in shows its Range’s `thumbnail` under its words, as a chapter’s shows over the seek bar and under it in the chapters’ menu. It renders nothing without Ranges. Its other props, and its `ref`, go to its element. For the view itself, see [`Body` (web components: `<clover-body>`)](https://clover.iiif.library.northwestern.edu/docs/body).

**React**

| Prop         | Type         | Default      | Description                                       |
| ------------ | ------------ | ------------ | ------------------------------------------------- |
| `as`         | element type | `"nav"`      | The element to render.                            |
| `aria-label` | `string`     | `"Contents"` | Its name. Give each its own where a page has two. |
| `className`  | `string`     | —            | Added to `clover-contents`.                       |

**Web components**

### `<clover-contents>`

The Manifest's table of contents (its Ranges), as a tree of links to each section, the one in view marked.

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |

## Examples

### Chapters

On a video or sound, Ranges that name a time are chapters, on the seek bar too. The entry follows playback, and pointing at either marks the other.

> **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/rudolf-hess-nuremberg/manifest.json">
  <Clover.Body />
  <Clover.Contents />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/manifest.json">
  <clover-body></clover-body>
  <clover-contents></clover-contents>
</clover-root>
```

### Articles in parts

A Range may read parts of pages, in an order of its own: a newspaper’s article in columns, continued pages later. Its regions are drawn on the Canvas, and while it is the current entry it steps through them, each framed and marked. This article starts in two columns on page 2 and goes on in two on page 5.

> **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://iiif.io/api/cookbook/recipe/0025-newspaper-article-index/manifest.json">
  <Clover.Body />
  <Clover.Contents />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://iiif.io/api/cookbook/recipe/0025-newspaper-article-index/manifest.json">
  <clover-body></clover-body>
  <clover-contents></clover-contents>
</clover-root>
```

### Without regions

The regions are drawn as the annotation set `CONTENTS_SET_ID`. Hide it, and Contents still steps through them.

**React**

```jsx
clover.setSetVisible(Clover.CONTENTS_SET_ID, false);
```

**Web components**

```html
<script type="module">
  // The Ranges' regions are the set "contents".
  document.querySelector("clover-root").clover.setSetVisible("contents", false);
</script>
```

### In the Viewer

The Viewer’s Panel shows it as its Contents section, for a Manifest with Ranges.

> **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://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json" />
```

**Web components**

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

### Your own

Use `tableOfContents` (web components: `root.clover.contents()`) for the same entries, in a table of your own: each has its `label`, the `canvasId` (web components: `canvas-id`) it goes to, its `time` or `region`, its `parts` where it has some, and its `children`. `currentContents` names the entry the reader is in, and `chaptersOf` gives a recording’s chapters.

**React**

```jsx
const manifest = Clover.useManifest();
const entries = Clover.tableOfContents(manifest);
```

**Web components**

```html
<script type="module">
  const root = document.querySelector("clover-root");
  root.addEventListener("clover-ready", () => {
    root.clover.subscribe(() => {
      const entries = root.clover.contents();
    });
  });
</script>
```

## Previous versions

[Clover 3.x › Viewer](https://clover.iiif.library.northwestern.edu/docs/3.x/viewer#information-panel)

- The Contents tab is a part of its own, for anywhere in a `Root` (web components: `<clover-root>`).
- `renderContents: false` is a `Panel` (web components: `<clover-panel>`) of `Tab` (web components: `<clover-tab>`)s without it.
- `defaultTab: "manifest-contents"` is the Panel’s `defaultValue="contents"`.