BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Guide

Post Navigation Pro

How to set up and style the Post Navigation widget in Elementor.

Post Navigation shows links to the previous and the next post, with labels, titles, featured images, dates and arrows. Use it at the end of a single post or in a single post template so readers can move on to another article. An optional link in the middle leads back to the blog or archive page.

Part of: Bright Addons Pro.

Set it up

  1. Open a single post template (or a post) in Elementor and drag in Post Navigation.

  2. Pick a Style: Plain, Cards or Image background.

  3. Switch Label, Post Title, Date, Featured Image and Arrows on or off, and edit Previous Label and Next Label.

  4. To keep readers within one topic, switch on Stay in the Same Group and choose the Group.

  5. For a link back to the blog, open Link in the Middle and switch on Show. Leave Link empty to use the blog or archive page.

  6. Adjust spacing, colors and image size in the Style tab.

Content options

Post Navigation

Option What it does
Style Sets the look: Plain, Cards or Image background.
Label Shows a small label above each title.
Previous Label Text of the label on the previous link.
Next Label Text of the label on the next link.
Post Title Shows the title of the linked post.
Title Lines Number of lines a title may take before it is cut off.
Date Shows the date of the linked post.
Featured Image Shows the featured image of the linked post, when it has one.
Arrows Shows an arrow icon on each link.
Previous Icon Icon used for the previous arrow.
Next Icon Icon used for the next arrow.
Stay in the Same Group Only moves between posts that share a category, or another group, with the current post.
Group The group to stay inside, such as Category or Tag.
One Below the Other on Phones Stacks the two links on phones instead of placing them side by side.

Link in the Middle

Option What it does
Show Adds an icon link between the two post links.
Link Where the middle link goes. Empty uses the blog or archive page.
Icon Icon of the middle link.
Name for Screen Readers The name read by screen readers, also shown as a tooltip.
Bright Addons Pro

Unlock this and 79 more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.

Style options

These sections are in the Style tab.

  • Links

    space between the links, smallest height, background, border, shadow, radius and padding with a hover state, plus Image Shade for the Image background style and Divider Color for the Plain style.

  • Text

    typography and color of the label, the title (with a hover color) and the date.

  • Image and Arrows

    image size and radius, arrow size, arrow color and arrow hover color.

  • Link in the Middle

    icon size, color, hover color, and the background, border, shadow, radius and padding of the middle link.

Tips

  • A single post template has no real neighbors in the editor, so the widget shows two recent posts as an example there.

  • On the live site nothing is printed when the post has neither a previous nor a next post.

  • The Image background style always loads the large image size. In the other styles the image size setting is used.

  • If the chosen Group does not apply to the post type, the widget falls back to moving between all posts.

Questions and answers

Where does the middle link go when Link is empty?

For normal posts it opens the blog page set in WordPress, or the home page when no blog page is set. For other post types it opens that post type’s archive.

Can it keep readers inside one category?

Yes. Switch on Stay in the Same Group and choose Category, Tag or another public group in the Group option.

What happens on the first or last post?

Only the link that exists is shown. The other side stays empty so the layout keeps its shape.

Does it work with custom post types?

Yes. It links the previous and next entry of whatever post is being viewed.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides