Sitecore Weekly Tips – Tip 6: next, previous and parent item navigation links in Sitecore SXA

If you ask me, this is one of the hidden gems of SXA, although it is not that well hidden ;-). If you want to create next and previous navigation on item level there are some default links for it. Now to avoid any confusion, I’m not talking about pagination, like you see on list pages such as a search result page. I’m talking about actual browsing through URL’s. It can be convenient for browsing to next or previous news or blog articles instead of going back to the list view.

So, here is where you can find them:

1. Open the Content Editor and go to /Tenant/Site/Settings/Default links/Hierarchy/. You can see three default links here:

  • Next sibling
  • Parent item
  • Previous sibling

These are items that you can place on a Partial Design with the link component.

2. Open a Partial Design and add the Link component twice. One for the previous sibling and one for the next sibling and select the Next sibling and Previous sibling data sources.

3. Because it is just another SXA component you can use rendering variants, styles and all other stuff that is available to you, to change whatever you like.

4. Save, publish and test your navigation.

As you have noticed, there is also a parent item, which shows you the parent item of the current item. Makes it complete isn’t it?

Cool stuff. Like, share and spread the SXA word.