Hugo Subsection Page Navigation with Looping Previous and Next Links

Cycles from last page to first and from first page to last within a subsection page collection.

Table of contents

• General info
• Animated screenshot
• Technologies

General info

It took me a while to figure out how to create this previous/next looping navigation pattern for a subsection in Hugo so I thought I'd share. This is part of a side project converting my portfolio website to the Hugo static site generator framework from WordPress and is intended to be used as a partial, for example in a sidebar area on a project page so users can navigate project examples in a carousel manner.

Animated demo showing starting point and code organization/development process

Technologies Used

Technology used:

• Hugo Framework (https://gohugo.io/, https://github.com/gohugoio/hugo)
• HTML
• CSS