# Post navigation

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](https://lovelyrender.com/documentation/add-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](https://lovelyrender.com/documentation/decide-look-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](https://lovelyrender.com/documentation/container-block/).
- 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** |

![The Navigation panel of the Content navigation block: Target on Next content, Stay in the same term off, Link opening on In the browser tab, Nofollow, Open in a new tab and When there is no target on Hide the block.](https://static.lovelyrender.com/uploads/2026/10/923-doc-blocs2-navigation-contextuelle.png)

| 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](https://lovelyrender.com/documentation/sort-with-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](https://lovelyrender.com/documentation/open-modal-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](https://lovelyrender.com/documentation/color-block/), [Add a background](https://lovelyrender.com/documentation/set-background/), [Format a text](https://lovelyrender.com/documentation/format-text/) and [Animate a block](https://lovelyrender.com/documentation/animate-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.

1. Open the posts template and add a two-column Container under the content.
2. In the first column, insert a **Post navigation** block and choose the **Target** **Previous post**.
3. Add before the target title a left arrow icon and the text “Previous post”.
4. In the second column, insert a second block, set to **Next post**, with a right arrow.
5. If your posts are filed by section, turn on **Stay in the same term** on both blocks.
6. 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.

## See also

- [Choose the look with templates](https://lovelyrender.com/documentation/decide-look-templates/)
- [Navigation](https://lovelyrender.com/documentation/navigation-block/)
- [Breadcrumbs](https://lovelyrender.com/documentation/breadcrumb-block/)
- [Sort with a category](https://lovelyrender.com/documentation/sort-with-category/)