Previous, Next

The Previous, Next component shows previous and next posts in a series. Useful for stepping through the diary.

View the code for this example

{% from 'includes/prevNext.njk' import prevNext as prevNext %}

{{ prevNext({
  classes: 'custom-class another-custom-class',
  label: 'Example previous and next navigation',
  prev: {
    title: 'Go back in time',
    url: {
      link: '#',
      text: 'Previous post'
    },
    date: '19 April 2023'
  },
  next: {
    title: 'Go forwards in time',
    url: {
      link: '#',
      text: 'Next post'
    },
    date: '22 April 2023'
  }
})}}

Nunjucks Macro parameters

Name	Type	Description
`classes`	string	Classes to add to the Previous, Next container.
`label`	string	A label that helps screen reader users navigate; added to the `aria-label` of the Previous, Next container.
`prev`	object	The previous post object.
`next`	object	The next post object.
`[prev,next].title`	string	Required. The title of the previous or next group.
`[prev,next].url.link`	string	Required. The url of the previous or next item.
`[prev,next].url.title`	string	Required. The title of the previous or next item.
`[prev,next].date`	string	Required. The date of the previous or next item.