Section Component

Blog Navigation

A navigation component that provides previous and next links between sequential blog posts. This component automatically integrates with Metalsmith's collections plugin to display contextual navigation at the end of blog articles.

How It Works

Unlike most section components, blog-navigation doesn't use frontmatter configuration for its content. Instead, it reads previous and next variables that are automatically populated by Metalsmith's collections plugin when processing blog posts.

The component only renders when a page has previous or next posts available, making it safe to include in any blog post template.

Live Example

To see this component in action, visit any blog post on this site. For example, check the bottom of theSample Blog Postto see the previous and next navigation links.

Usage

Add the blog-navigation section to any blog post frontmatter:

- sectionType: blog-navigation
  containerTag: section
  classes: ""
  id: ""
  isDisabled: false
  containerFields:
    inContainer: false
    isAnimated: true
    noMargin:
      top: true
      bottom: false
    noPadding:
      top: false
      bottom: false
    background:
      color: ""
      image: ""
      imageScreen: "none"

Collection Integration

The component requires Metalsmith's collections plugin to be configured for blog posts:

// In metalsmith.js
.use(collections({
  blog: {
    pattern: 'blog/**/*.md',
    sortBy: 'card.date',
    reverse: true
  }
}))

The collections plugin automatically adds previous and next properties to each page in the collection, which the component uses to generate navigation links.

Conditional Rendering

The component handles edge cases automatically:

  • First post in collection: Only shows "Next" link
  • Last post in collection: Only shows "Previous" link
  • Single post: Component doesn't render at all
  • Non-collection page: Component doesn't render

Configuration Options

PropertyTypeRequiredDescription
sectionTypestringYesMust be blog-navigation
isDisabledbooleanNoSet to true to hide the section
containerFieldsobjectNoStandard container configuration

Note that the navigation content (post titles and URLs) is automatically populated from the collection data and cannot be configured in frontmatter.