Bear Blog post navigation

Bear's {{ previous_post }} and {{ next_post }} links work out of the box.

These styles center them and swap the default look for a pair of guillemets (arrows), keeping things minimal.

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

.post-nav {
  display: none;
}

body.post .post-nav {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.2em;
  margin-block-end: 1.5rem;
}

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

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

Want more? Check out the full Bear Blog library.