Index (Metadata)

The <Index /> provides a site-wide list of terms built from the labels listed under the metadata key of the canopy.yml . During the build, every configured collection and manifest is traversed, and the values for each label are organized. The <Index /> then emits a <dl> per label with <dt> for the heading and <dd> rows for every value that appeared anywhere in the corpus. Think of it as a metadata-based analog to a physical volume's index. Every value doubles as a link to /search so readers can jump straight into filtered results for that term.

<Index />
Subject
Afghan Wars
Afghanistan
Afghanistan--Ghaznī
Afghanistan--Kandahār
Afghanistan--Paktīā
Alai Darwaza (Quwwat-ul-Islam Mosque, Delhi, India)
Animal fighting
Anstruther, David, 1750-1825
Antiquities
Arabian Sea
Architecture
Architecture, British colonial
Architecture, Mughal Empire
Armies--Officers
Art
Date
Language
Genre

Usage

All lists

Add the index to any content page to build a dedicated an index of terms across all items in your collections:

content/terms.mdx
---title: Terms--- # Terms A comprehensive index of terms across items in our collections: <Index />

Single list

Optionally, you can render a single label by passing label. This is helpful when you want to highlight one facet beside other narrative copy or define a dedicated page for a specific subset of terms.

content/terms/date.mdx
---title: Dates--- # Dates A comprehensive index of dates across items in our collections: <Index label="Date" />
Date

Limit and Toggle Customizations

By default each list shows up to 15 values before revealing a "Show more" button. You can adjust this limit and customize the button labels for internationalization or tone.

<Index  label="Subject"  limit={50}  expandLabel="Show more subjects"  collapseLabel="Show fewer subjects"/>

Pass limit={0} to show all values at once with no toggle button.

<Index  label="Subject"  limit={0}/>

Sort Order

Values within each label group can be ordered alphabetically (the default) or by frequency — most common value first. Use sortOrder="count" to surface the most-used terms at the top.

<Index  label="Subject"  sortOrder="count"/>
Subject
India
Mica
Miniature painting, Indic
Occupations in art
Watercolor painting, Indic
Himalaya Mountains
Fortification
Sri Lanka
Hindu funeral rites and ceremonies
Hindu temples
India--Mumbai--Elephanta Caves
Sati
Tombs
Views in art
Afghanistan

Show Count

Pass showCount to display the number of items that carry each value alongside the term, e.g. Nepal (6).

<Index  label="Subject"  showCount/>
Subject
Afghan Wars (1)
Afghanistan (4)
Afghanistan--Ghaznī (1)
Afghanistan--Kandahār (1)
Afghanistan--Paktīā (1)
Alai Darwaza (Quwwat-ul-Islam Mosque, Delhi, India) (1)
Animal fighting (1)
Anstruther, David, 1750-1825 (1)
Antiquities (1)
Arabian Sea (1)
Architecture (1)
Architecture, British colonial (3)
Architecture, Mughal Empire (3)
Armies--Officers (1)
Art (1)

Both options can be combined:

<Index  label="Subject"  sortOrder="count"  showCount/>
Subject
India (42)
Mica (11)
Miniature painting, Indic (11)
Occupations in art (11)
Watercolor painting, Indic (11)
Himalaya Mountains (8)
Fortification (7)
Sri Lanka (6)
Hindu funeral rites and ceremonies (5)
Hindu temples (5)
India--Mumbai--Elephanta Caves (5)
Sati (5)
Tombs (5)
Views in art (5)
Afghanistan (4)

API

PropTypeDefaultNotes
labelstringRestrict the index to a single metadata label (case-insensitive match on the configured labels).
metadataarrayglobalOptional override (array of {label, values}) to render a curated subset instead of the full set.
limitnumber15Maximum number of values to show before revealing the toggle inside each <dl>. Pass 0 to show all values with no toggle.
sortOrder"alphabetically" | "count""alphabetically"Order values alphabetically or by descending occurrence count. Sorting is applied before the limit, so the most relevant values are always visible first when using "count".
showCountbooleanfalseWhen true, appends the occurrence count in parentheses after each value, e.g. Nepal (6).
expandLabelstringShow moreText for the expand button when additional values are hidden.
collapseLabelstringShow lessText used after expanding the list.
classNamestringExtra classes applied to the wrapping <div>. Each label always renders as its own <dl>.