---
title: "Panel"
description: "What a IIIF resource says about itself, in sections as tabs or an accordion, including sections of your own."
url: https://clover.iiif.library.northwestern.edu/docs/panel
version: "4"
---

# Panel

\<Clover.Panel /> (web components: \<clover-panel>)17 kB added to a page with a Root, gzipped (web components: 40 kB added to a page with a \<clover-root>, styles included, gzipped)

What the resource says about itself, in sections: tabs or an accordion.

> **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 />
  <div style={{ height: "24rem", overflowY: "auto" }}>
    <Clover.Panel layout="tabs" defaultValue="about" />
  </div>
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-body></clover-body>
  <div style="height: 24rem; overflow-y: auto">
    <clover-panel layout="tabs" value="about"></clover-panel>
  </div>
</clover-root>
```

## API reference

Inside a `Root` (web components: `<clover-root>`), it shows About and each section the resource has data for, or `Tab` (web components: `<clover-tab>`)s of your own: one always open, each loaded the first time it opens. Its tabs and accordion follow WAI-ARIA’s patterns. It is as tall as its sections; to scroll it, give the element around it a height and `overflow-y: auto`, as the templates do. Its other props, and its `ref`, go to its element.

**React**

### Panel

| Prop            | Type                      | Default   | Description                                                                                                                    |
| --------------- | ------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `layout`        | `"tabs" \| "accordion"`   | `"tabs"`  | A row of tabs, or sections stacked, each under its heading.                                                                    |
| `defaultValue`  | `string`                  | The first | The section open first.                                                                                                        |
| `value`         | `string`                  | —         | The section open, controlled.                                                                                                  |
| `onValueChange` | `(value: string) => void` | —         | A section was opened.                                                                                                          |
| `onClose`       | `() => void`              | —         | A close button, for a panel floating over the page.                                                                            |
| `closeOnEscape` | `boolean`                 | `false`   | Escape closes it too; its close button moves to its inner edge.                                                                |
| `headingLevel`  | `number`                  | `3`       | Its first headings: one below the heading over it.                                                                             |
| `download`      | `boolean`                 | `true`    | A Download button beside About’s heading, listing the downloads; `false` leaves them out.                                      |
| `languages`     | `boolean`                 | `true`    | About’s heading offers the languages the resource comes in, the whole Root reading in the one chosen; `false` leaves them out. |
| `as`            | element type              | `"aside"` | The element to render.                                                                                                         |
| `children`      | `ReactNode`               | —         | `Tab`s: sections of your own, in place of the defaults.                                                                        |
| `className`     | `string`                  | —         | Added to `clover-panel`.                                                                                                       |

### Tab

One section of a `Panel`: a tab, or a heading in an accordion. It renders nothing itself.

| Prop       | Type        | Default  | Description                                                     |
| ---------- | ----------- | -------- | --------------------------------------------------------------- |
| `value`    | `string`    | Required | Names it, for the panel’s `value` and `defaultValue`.           |
| `label`    | `ReactNode` | Required | Its tab’s or heading’s text. Mark another language with `lang`. |
| `children` | `ReactNode` | —        | What the section shows.                                         |

### PanelToggle

A round button that shows and hides the panel. As a child of `Body`, it sits among the Canvas’s controls.

| Prop           | Type                      | Default  | Description                            |
| -------------- | ------------------------- | -------- | -------------------------------------- |
| `open`         | `boolean`                 | Required | Whether the panel is showing.          |
| `onOpenChange` | `(open: boolean) => void` | Required | Called with `!open` when pressed.      |
| `controls`     | `string`                  | —        | The panel’s `id`, for `aria-controls`. |

### About

The panel’s first section, and a part of its own: the resource’s label and thumbnail, summary, metadata, required statement, its date (`navDate`, in the reader’s language), provider, rights, homepage, see also, downloads and address. For a Canvas shown on its own, it starts with the Manifest the Canvas is part of.

| Prop            | Type      | Default | Description                                                                                                                                                       |
| --------------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `canvasSummary` | `boolean` | `false` | The current Canvas’s summary too, before the resource’s.                                                                                                          |
| `download`      | `boolean` | `true`  | Alone, outside a Panel: the downloads, Download’s links, in a section of their own. In a Panel, its heading’s Download button lists them.                         |
| `languages`     | `boolean` | `true`  | Alone, outside a Panel: the languages the resource comes in, over what About says, the whole Root reading in the one chosen. In a Panel, its heading offers them. |
| `headingLevel`  | `number`  | `3`     | Its titles: the label, Rights, Homepage and the rest.                                                                                                             |
| `label`         | `boolean` | `true`  | The resource’s label first, as a heading.                                                                                                                         |
| `thumbnail`     | `boolean` | `true`  | The resource’s thumbnail, small, beside the label.                                                                                                                |
| `className`     | `string`  | —       | Added to `clover-about`.                                                                                                                                          |

**Web components**

### `<clover-panel>`

The information panel of the clover-root it is in, in tabs or stacked boxes: the sections Clover has data for (About, Contents, Search, a Map, the Transcript, Annotations, the Collection), or its clover-tab children, in their order.

| Name                  | Type                    | Default | Description                                                                                                                                                                       |
| --------------------- | ----------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `layout`              | `"tabs" \| "accordion"` | `tabs`  | A row of tabs, one section shown at a time, or the sections stacked as boxes, each opened by its heading.                                                                         |
| `value`               | `string`                | —       | The tab shown first, by its value; changed later, it shows that tab. The first, by default.                                                                                       |
| `heading-level`       | `number`                | `3`     | The level of the boxes' headings (accordion), one under the heading the panel sits beneath; its sections' own headings go a level below.                                          |
| `download`            | `boolean`               | `true`  | About's heading offers the downloads, by a Download button that lists them; "false" leaves them out.                                                                              |
| `languages`           | `boolean`               | `true`  | Where what the resource says of itself comes in several languages, About's heading offers them, and the whole clover-root reads in the one chosen. "false" leaves the choice out. |
| `closable`            | `boolean`               | `false` | A close button in the panel. Closing hands focus back to the control that opens it and hides what that control shows (or the panel itself).                                       |
| `close-on-escape`     | `boolean`               | `false` | For a panel over the page: Escape inside it closes it too, and its close button sits at its inner edge.                                                                           |
| `as`                  | `"aside" \| "div"`      | `aside` | The element to draw: a complementary landmark, or a box.                                                                                                                          |
| `clover-value-change` | `{ value: string }`     | —       | An event. The reader chose a tab, or opened a box.                                                                                                                                |
| `clover-close`        | `Record<string, never>` | —       | An event. The reader closed the panel. Cancel it (preventDefault) to keep it shown.                                                                                               |

### `<clover-tab>`

One tab of the clover-panel it is in: its label, and what it holds, which the panel shows in its section, moved there when the section first opens. It draws nothing itself.

| Name           | Type      | Default | Description                                                                                       |
| -------------- | --------- | ------- | ------------------------------------------------------------------------------------------------- |
| `value`        | `string`  | —       | What the tab is called by, for the panel's value.                                                 |
| `label`        | `string`  | —       | What the tab says.                                                                                |
| `slot="label"` | `Element` | —       | Markup for what the tab says, instead of the label attribute: shown as a copy, so give it no ids. |

### `<clover-panel-toggle>`

A button that shows and hides an element, the information panel's or any, by its id: open while it is not hidden. In a clover-body, it is one of the Body's controls; elsewhere, a button where it is.

| Name                 | Type                | Default | Description                                                                                                                  |
| -------------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `controls`           | `string`            | —       | The id of what it shows and hides.                                                                                           |
| `clover-open-change` | `{ open: boolean }` | —       | An event. The reader pressed it, to show (open) or hide what it controls. Cancel it (preventDefault) to leave that as it is. |

### `<clover-about>`

The information panel's first section, on its own: the label and thumbnail, summary, metadata, required statement, rights, homepage, see also, downloads and address.

| Name             | Type      | Default | Description                                                                                                                                                                                                   |
| ---------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `canvas-summary` | `boolean` | `false` | Also the Canvas in view's summary, before the resource's.                                                                                                                                                     |
| `download`       | `boolean` | `true`  | "false" leaves out the downloads.                                                                                                                                                                             |
| `languages`      | `boolean` | `true`  | Alone: outside a clover-panel, where what the resource says of itself comes in several languages, a choice of them over what it says, the whole clover-root reading in the one chosen. "false" leaves it out. |
| `thumbnail`      | `boolean` | `true`  | "false" leaves out the resource's thumbnail.                                                                                                                                                                  |
| `label`          | `boolean` | `true`  | "false" leaves out the resource's label, its heading.                                                                                                                                                         |
| `heading-level`  | `number`  | `3`     | The level of each section's title, one under the heading it sits beneath. Past 6, each names what it heads instead.                                                                                           |

## Examples

### Sections

With no `Tab` (web components: `<clover-tab>`)s, it shows [About](https://clover.iiif.library.northwestern.edu/docs/panel#about), then each section the resource has data for: Views (a content state’s targets, where it names two or more, as [Items](https://clover.iiif.library.northwestern.edu/docs/items) lists them, with steps between them), [Collection](https://clover.iiif.library.northwestern.edu/docs/collection), [Contents](https://clover.iiif.library.northwestern.edu/docs/contents), [Search](https://clover.iiif.library.northwestern.edu/docs/search), [Map](https://clover.iiif.library.northwestern.edu/docs/map), [Transcript](https://clover.iiif.library.northwestern.edu/docs/transcript) and [Annotations](https://clover.iiif.library.northwestern.edu/docs/annotations). This newspaper has a Content Search service, and its OCR as annotations, which a search finds in.

> **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/content-search/manifest.json">
  <Clover.Body />
  <div style={{ height: "24rem", overflowY: "auto" }}>
    <Clover.Panel />
  </div>
</Clover.Root>
```

**Web components**

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

### Tabs or accordion

Use `layout="accordion"` to stack the sections, each opened by its heading, as the [templates](https://clover.iiif.library.northwestern.edu/docs/viewer#panel-layout) do. In a box that scrolls, the headings stay in sight, at its top and its foot.

> **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.Panel layout="accordion" />
```

**Web components**

```html
<clover-panel layout="accordion"></clover-panel>
```

### The open section

Use `defaultValue` to choose the section open first, or `value` and `onValueChange` (web components: `clover-value-change`) to control it. The default sections are `about`, `targets`, `collection`, `contents`, `search`, `map`, `transcript` and `annotations`. A search started outside the Search section (the Root’s `searchQuery` (web components: `search-query`), or your own `clover.search()`) opens it, ahead of `defaultValue`, so its hits come with their list. Focus stays where it is, and a Panel that is shut stays shut until the reader opens it, on Search. A `value` you control is left as you set it. This film opens on its chapters.

> **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.Panel defaultValue="contents" />
```

**Web components**

```html
<clover-panel value="contents"></clover-panel>
```

### Languages

Where what a resource says of itself comes in several languages, About’s heading offers them, shown whichever section is open, and every part in the Root reads IIIF text in the one chosen, a title over it as About. It starts in the Root’s `language`, which a page sets to read in its own, here French, else in the reader’s. A reader’s choice lasts until the page gives the Root another `language`. This painting is described in English and French.

> **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/0006-text-language/manifest.json"
  language="fr"
>
  <Clover.Body />
  <Clover.Panel layout="accordion" />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://iiif.io/api/cookbook/recipe/0006-text-language/manifest.json"
  language="fr">
  <clover-body></clover-body>
  <clover-panel layout="accordion"></clover-panel>
</clover-root>
```

### Sections of your own

Give it `Tab` (web components: `<clover-tab>`)s, and they are its sections, in their order. Each holds Clover’s parts or a component of your own that reads the Root through hooks. Give the parts in them the heading level the panel would: its own in tabs, one below it in an accordion.

**React**

```jsx
function PageNotes({ notes }) {
  const canvas = Clover.useActiveCanvas();
  return <p>{notes[canvas?.id] ?? "No notes for this page."}</p>;
}
 
<Clover.Panel>
  <Clover.Tab value="about" label="About">
    <Clover.About />
  </Clover.Tab>
  <Clover.Tab value="notes" label="Notes">
    <PageNotes notes={notes} />
  </Clover.Tab>
</Clover.Panel>;
```

**Web components**

```html
<clover-panel>
  <clover-tab value="about" label="About">
    <clover-about></clover-about>
  </clover-tab>
  <clover-tab value="notes" label="Notes">
    <p id="page-notes"></p>
  </clover-tab>
</clover-panel>
 
<script type="module">
  const root = document.querySelector("clover-root");
  const shown = document.getElementById("page-notes");
  const show = () => {
    const canvas = root.clover.activeCanvas();
    shown.textContent = notes[canvas?.id] ?? "No notes for this page.";
  };
  const start = () => {
    show();
    root.clover.subscribe(show);
  };
  if (root.clover) start();
  else root.addEventListener("clover-ready", start, { once: true });
</script>
```

### Showing and hiding it

`PanelToggle` (web components: `<clover-panel-toggle>`) shows and hides it: name the panel in its `controls`, and hide the panel with `hidden`. A panel floating over the page also takes `onClose` (web components: `clover-close`), for a close button, and `closeOnEscape` (web components: `close-on-escape`); move focus into it as it opens.

**React**

```jsx
function Layout({ url }) {
  const [open, setOpen] = React.useState(true);
  return (
    <Clover.Root iiifContent={url}>
      <Clover.Body>
        <Clover.PanelToggle
          open={open}
          onOpenChange={setOpen}
          controls="panel"
        />
      </Clover.Body>
      <Clover.Panel id="panel" hidden={!open} />
    </Clover.Root>
  );
}
```

**Web components**

```html
<!-- The toggle follows the panel's own hidden: write hidden on it to start it shut. -->
<clover-root
  iiif-content="https://iiif.io/api/cookbook/recipe/0009-book-1/manifest.json"
>
  <clover-body>
    <clover-panel-toggle controls="panel"></clover-panel-toggle>
  </clover-body>
  <clover-panel id="panel"></clover-panel>
</clover-root>
```

## Previous versions

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

- `options.informationPanel` becomes [`Default`](https://clover.iiif.library.northwestern.edu/docs/viewer#default)’s panel props, and `Tab` (web components: `<clover-tab>`)s.
- A plugin’s panel is a `Tab` (web components: `<clover-tab>`) of your own.
- `defaultTab` is `defaultValue`.