Collection navigation

Collection navigation is the end-of-article list that connects entries in the same editorial collection. It appears only when the current blog or TIL entry declares collection: and at least one sibling entry has the same collection: value or lists it under collections:. It is a local sequence, not a generic related-reading list.

When to use#

• A set of blog posts or TIL notes has one durable editorial subject or sequence and readers benefit from moving among its entries
• The collection name is stable enough to appear in entry metadata and be used as a data key
• Use related: for a short, intentional set of adjacent pages that are not members of one collection
• Do not use a collection merely to add a badge or to group content temporarily; an empty or one-entry collection renders nothing

Implementation#

collection: accessibility

collections:
  - accessibility
  - web-performance

{{ partial "post-collection.html" . }}

<aside class="flow-section border-t border-line pt-[var(--space-s-m)]" aria-labelledby="collection-heading">
  <h2 id="collection-heading" class="meta m-0">Collection: Accessibility</h2>
  <div class="mt-[var(--space-xs)] grid gap-0 border-t border-line">
    <a class="index-row sm:grid-cols-[minmax(0,1fr)_7rem]" href="/en/blog/example/">
      <span class="collection-row-title">Example entry</span>
      <time class="collection-row-date sm:text-right" datetime="2026-08-19">2026.08.19</time>
    </a>
  </div>
</aside>

layouts/partials/post-collection.html scans regular pages in the current section, excludes the current page, and matches either collection: or collections:. It orders matches by weight, then date and title, and renders nothing unless it finds a sibling. Blog and TIL single layouts call the partial after the article body. CSS reuses the site’s index-row and metadata treatments; there is no JavaScript.

Options#

Accessibility#

• The component is an <aside> named by its own <h2>, so assistive technology announces the collection context before its links.
• Each entry is a normal link with a visible title and a machine-readable <time> date. Tab reaches entries in their displayed order and Enter follows one.
• The component does not render an empty landmark. A single entry has no sibling destination, so it also renders nothing.
• Keep a collection’s label meaningful without relying on the metadata badge; the heading supplies the context for every reader.