Prevnext

Prevnext is a navigation pattern that presents two linked elements to move to the previous and next item in a sequence. It is used on websites, documentation, image galleries, and wikis to provide a linear path through related content and help users maintain orientation.

Implementation and semantics commonly rely on two anchor elements labeled Previous and Next. In semantic HTML, these links are often placed inside a nav container and use the rel attributes rel="prev" and rel="next" to indicate their relationship to adjacent content. This helps search engines understand the sequence and can support crawlers and enhanced search results. Designers may encapsulate the links in a reusable component or template and ensure accessible keyboard focus and descriptive labeling.

In content management systems and wiki platforms, a prevnext component or template is frequently available to automatically generate links to adjacent content within a series. This includes previous and next posts in a blog, pages in a tutorial, or items in a gallery. WordPress, for example, offers functions like the_post_navigation() and adjacent_post_link() to render adjacent links; other platforms provide similar capabilities.

Considerations for using prevnext include its suitability for clearly ordered content and its impact on user flow. When content is not logically sequential, a simple or alternative navigation method may be preferable. For search engine optimization, maintain accurate and non-broken rel="prev"/rel="next" links and ensure accessibility with visible focus states and descriptive labels. Related concepts include pagination and adjacent links.