Go back to Examples

Previous and next items

CMS - Intermediate

Previous and next items are used on collection detail pages. They're great for SEO as it increases internal linking and UX as a visitor can navigate the site easier. Combined with conditional rendering the link elements will allow show if a previous or next item exists.

                <a class="btn btn-primary" v-bind:href="'/' + item.collectionSlug + '/' + vPage.previousItem.slug" v-if="vPage.previousItem" v-html="vPage.previousItem.name"></a>
        <a class="btn btn-primary" v-bind:href="'/' + item.collectionSlug + '/' + vPage.nextItem.slug" v-if="vPage.nextItem" v-html="vPage.nextItem.name"></a>