> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Related Tags — post-to-tag relation chips below an article

> The Related Tags section renders topic chips below a post by resolving tag references against the full tags collection. Use it on post detail pages.

The `related-tags` section renders a row of clickable topic chips beneath a post. It uses two collection references: `item` resolves to the current route's `Post` object (which carries an array of tag references), and `tags` provides the full tags collection as a lookup map. At render time, the section resolves each tag key in `item.tags` against the `tags` map and renders one chip per matched tag — each linking to that tag's page.

Use `related-tags` on `posts/[slug]` pages, placed directly below the [Post Detail](/reference/sections/post-detail) section.

## Data fields

<ParamField body="item" type="Post" required>
  A collection reference that resolves to the current route's `Post` object. In your page JSON, set this to `{ "$ref": "collection:current" }`. The section reads the resolved post's `tags` array to determine which chips to render.
</ParamField>

<ParamField body="tags" type="Record<string, Tag>" required>
  A reference to the full tags collection, provided as a string-keyed map of `Tag` objects. In your page JSON, set this to `{ "$ref": "../../collections/tags/tags.json" }`. The section uses this map to look up each tag referenced in `item.tags` and to construct navigation hrefs.
</ParamField>

<ParamField body="label" type="string">
  Optional heading rendered above the chips row — for example `"Relations demo"`. When omitted, no label is shown.
</ParamField>

<ParamField body="title" type="string">
  Optional secondary title rendered below `label` — for example `"Filed under"`. Rendered with lighter typographic weight than `label`.
</ParamField>

<ParamField body="emptyLabel" type="string">
  Optional message displayed when the current post has no tags — for example `"This post has no topics yet."`. When omitted and the post has no tags, the section renders nothing.
</ParamField>

## Relation model

The post-to-tag relation is stored on the post side only. Each post's `tags` array holds references to tag entries. The tag record itself carries no `posts` field — the Related Tags section reads the forward relation from the post and renders the result.

## Settings fields

<ParamField body="paddingTop" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied above the section.
</ParamField>

<ParamField body="paddingBottom" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied below the section.
</ParamField>

## JSON example

The following example is taken from `posts/[slug].json`:

```json theme={null}
{
  "id": "post-detail-related-tags",
  "type": "related-tags",
  "data": {
    "label": "Relations demo",
    "title": "Filed under",
    "emptyLabel": "This post has no topics yet.",
    "item": { "$ref": "collection:current" },
    "tags": { "$ref": "../../collections/tags/tags.json" }
  },
  "settings": {}
}
```

OlonJS resolves `collection:current` to the post for the current route and the `$ref` path to the full tags collection before passing both to the section. The component then filters and renders chips for each matching tag.

## Typical page usage

Place `related-tags` immediately after [Post Detail](/reference/sections/post-detail) on the `posts/[slug]` page. Both sections share the same `collection:current` post reference, so no extra configuration is needed to connect them.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.