The Post navigation block places a link to a computed destination: the previous or next content item, the parent page, an archive or a term page. This page describes its targets, its opening settings, its behavior without a target and the block that displays the target’s title. An example places a bar between blog posts.
Add the block
Insert the Post navigation block (Add a block), or type previous or next in the block search. Its destination is computed at display time from the content item shown. Its usual place is the template of a content type, where a single “Previous | Next” bar serves all the content items of the type (Decide the look with templates).
Placed in the template of a modal or a side panel, it refers to the content item shown in that overlay.
Compose the link
The block is a container: everything you place in it forms the clickable area. It comes with a Navigation target title block, which displays the name of the target. Add next to it an icon, a text like “Previous post” or a media item.
- The block uses the Flex layout, so the icon and the title sit on one line. Its toolbar offers Block, Flex and Grid, set as on a Container.
- The blocks that display a content item’s data show those of the targeted content item. These are the Post thumbnail, the Post media, the Content field and the Data in a sentence. In the editor, the media is shown as a sample with the last image of your media library.
- An archive has no media and no field: only these blocks disappear from the link. A term has its own, and the link to its page shows them.
Set the target
Select the block, Settings tab, Navigation panel.
| Setting | Effect | Default value |
|---|---|---|
| Target | The destination of the link, among five choices described in the table The five targets. | Next post |
| Stay in the same term | Limits the search for the neighboring content item to the content items filed under one of the terms of the content item shown. With Previous post and Next post. | Off |
| Category | The category to follow, under the name of the field that links the content type to this category, “Section” for example. With Term page, or with Stay in the same term turned on. | The first category of the type |
| Link opening | Open in the browser tab, In a modal, Modal at the bottom left, Modal at the bottom center, Modal at the bottom right or On the right side. Overlays are only offered for Previous post, Next post and Parent page. | Open in the browser tab |
| Nofollow | Asks search engines not to follow the link. With the Open in the browser tab opening. | Off |
| Open in a new tab | Opens the destination in a new tab. With the Open in the browser tab opening. | Off |
| When there is no target | Hide the block or Show as disabled. | Hide the block |
| Target | The link leads to | The title shown | No target when |
|---|---|---|---|
| Previous post | The content item published just before, in the same type. | Its title. | The content item shown is the oldest of the type. |
| Next post | The content item published just after, in the same type. | Its title. | The content item shown is the most recent of the type. |
| Parent page | The parent page. | Its title. | The content item has no parent, or its parent is not published. |
| Archive of this type | The page that lists all the content items of the type. | The name of the type. | The type has no list page. |
| Term page | The page of the term under which the content item is filed, in the category chosen under Category. | The title of the term. | The content item is filed under no term of this category, the term is not published, or the category gives no page to its terms. |
- Previous and next are computed on the publication date, within the same content type and the same language. There is no other order.
- For Term page, a content item filed under several terms of the same category leads to the first one in its list.
- Switching from a target that accepts a modal to an archive or a term page puts the opening back on Open in the browser tab.
Stay in the same term
With Stay in the same term, the previous and next content items are searched among the content items filed under at least one of the terms of the content item shown, in the category chosen under Category. A content item filed under no term of this category has no previous or next.
The Category list shows the fields that link the template’s content type to a category. If the type has none, the panel shows “This content type is not filed in any category.” in its place: first add a reference field to a category (File with a category).
The link opening
An opening in a modal or on the side shows the targeted content item over the page, without leaving it. Each opening mode can have its own template, without a header or footer for example (Open a modal or a side panel).
These openings are not links that search engines follow: the address called is encoded. Nofollow and Open in a new tab disappear from the panel. The content item is still read by search engines at its own address.
When the target does not exist
| Choices | Result |
|---|---|
| Hide the block | The block disappears from the page. |
| Show as disabled | The block stays visible but is no longer clickable. It is announced as disabled to assistive technologies. |
With Show as disabled, the target’s title empties. The media and fields of the targeted content item disappear. Provide a text or an icon in the link that stays. The block keeps its look, hover effect included: the Styles tab has no state for a disabled link.
The target title
The Navigation target title block displays the name of the target. It has no setting and follows the target of the parent block. It is not itself a link: the parent block is.
On a real content item, the editor shows the actual title of the target. When the target depends on a term, it computes it from the saved content. In a template, there is no content item shown: the editor shows a sample text.
| Target | Sample text |
|---|---|
| Previous post | Previous content title |
| Next post | Next content title |
| Parent page | Parent page title |
| Archive of this type | Archive title |
| Term page | Term name |
Style the link
The block has three states to style: Default, Hover and Focus. The target title has two, Default and Hover. The Focus state shows the keyboard visitor where they are: style it.
Colors, background images, typography and animations are set as on any block: see Color a block, Add a background, Format a text and Animate a block.
On a phone
The layout is set screen by screen, as on a container. A “Previous | Next” bar in two columns on a computer can stack on a phone.
Accessibility
- The block has no accessible name field: a screen reader announces the text written in the link. A link made of a single arrow has no name. Keep the Navigation target title or a visible label.
- A link in a new tab carries an invisible notice, read by screen readers: “opens in a new tab”.
Chain the posts of a blog
This example places under each blog post a link to the previous post and a link to the next one.
- Open the posts template and add a two-column Container under the content.
- In the first column, insert a Post navigation block and choose the Target Previous post.
- Add before the target title a left arrow icon and the text “Previous post”.
- In the second column, insert a second block, set to Next post, with a right arrow.
- If your posts are filed by section, turn on Stay in the same term on both blocks.
- Publish the template.
The reader who reaches the end of a post moves on to the next one, within their section if you asked for it. On the most recent post, the next link disappears.