Robert Birming

Post navigation

Bear's {{ previous_post }} and {{ next_post }} links work out of the box. These styles center them and add arrows, keeping the default look intact.1

Preview

How to use

Add the markup to your footer (Dashboard → Settings → Header and footer directives) and the styles to your theme. Bear replaces the placeholders with links to the previous and next posts automatically.

Markup

<div class="post-nav">
{{ previous_post }} {{ next_post }}
</div>

Styles

/* Previous / Next | robertbirming.com */
.post-nav {
  display: none;
}

body.post .post-nav {
  display: block;
  margin-block-end: var(--space-block);
}

.post-nav p {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.2em;
}

.post-nav a {
  text-decoration: none;
}

.post-nav a.previous-post::before {
  content: "\2190\00a0";
}

.post-nav a.next-post::after {
  content: "\00a0\2192";
}

Want more? Check out all available Bearming add-ons.

Happy blogging, whichever direction you’re heading.

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩