CMS Next Previous Button Devpack Freebie :) Enjoy

MichaelDroste · August 17, 2026, 12:41pm

Coming again Soon - Mobile Formatting Issue

I’ve wanted this thought others might like it too

A lot of info but here ya go

CMS Prev Next

Previous / Next navigation for RapidWeaver Elements CMS items. Drop it into a
CMS Item page and it finds the neighbouring post on its own — no hidden
collection, no page picker, no list to maintain.

Free, MIT licensed. Elements 3.0.9 or later.

Two requirements

Both of these are how the Elements CMS works, not choices this component makes.

It has to sit inside a CMS Item, in the Before or After drop zone. It
needs to know which item is being viewed, and outside that context there is
no current item to have neighbours. Placed anywhere else it renders nothing.
Related Items behaves the same way for the same reason.
The page has to be published with a .php extension, like every CMS
page. The neighbours are worked out when the page is requested, not when you
publish, so the component is server-side. If the page is not .php the
component renders nothing at all — deliberately. It will never print PHP
source onto your page.

What you get out of the box

A plain pair of rounded Previous and Next buttons: pill shaped, filled in
your theme’s brand colour, base body font at base size, sized to their wording
and centred together as a pair, with clear space above them.

Switch Align To Edges on for the usual blog convention of one button at
each end of the content. It reads well in a narrow column; in a wide one it
throws the two buttons a long way apart, and it will fight anything else centred
below them — a “Return Home” button, say. Centred is the default for that reason.

The neighbouring item’s headline is off by default — switch Show Item
Titles on to add it, and switch Button Width to Equal halves at the same
time so the two buttons stay the same size once they carry different-length
titles. Show Labels is the separate checkbox for the Previous / Next wording
itself, and both labels are editable.

Hover states preview in the Elements canvas as well as in a browser, so the
background, border and title hover colours can be judged without publishing.

Setup

Add it below your Collection Item and publish. That is usually the whole job:
Collection is empty by default, and an empty Collection means “find the
folder yourself”.

The automatic search is not a guess. It looks in the folders beside and above the
page — and two levels of subfolder within each, because the standard layout puts
the page at /post/ and the content at /cms/posts/ — for the Markdown file
whose slug matches the address being viewed. The folder holding that file is your
collection by definition. It stops at the first match, looks no more than three
levels up, skips Elements’ own rw/ and resources/ trees, and gives up after
120 directories, so it cannot turn a page request into a walk of your whole site.

Fill Collection in only if the search misses — a path relative to the page,
such as posts or content/episodes. Levels Up climbs that many folders
first, for the case where the content sits above the page rather than beside it.
A configured path can never climb out on its own or point at an absolute
location.

If your items have no `date:`

Check one of your Markdown files before choosing Order By. A collection with no
date: in its front matter cannot be ordered by date — every item reads as the
same 1970 timestamp, so “Date Published” degenerates into whatever the tie-break
happens to be, and Older / Newer stop meaning anything.

Order By File Name with the direction matching your list is the right answer
there, and it is exactly reproducible. Files named 0001-…, 0002-… sort into
the order you intended them to have.

The one thing you must get right

Order By, Order Direction, Status and Date have to match the
Collection that lists these items. If they disagree, the buttons will point at
real posts in the wrong order, which is worse than pointing nowhere. The
defaults match a stock Collection (Date Published, Descending, Published, In the
past), so if you have not changed those on your Collection you need not change
them here either.

Everything else — Pretty URLs, which item is current, whether the address is a
clean path or ?item=slug — is detected, not asked about. There is no
Pretty URLs switch to get out of step: the neighbour links are written in
whichever form the visitor’s request arrived in.

Settings

The panel follows the same group names and running order as Elements’ own Button,
so the cosmetic half is where you already expect it: Font and Text Styles,
Layout, Sizing, Spacing, Transitions, Effects, Background, Borders, Advanced.
Only the first two groups are particular to this component.

Collection — the CMS wiring.

Collection — folder of Markdown items, relative to the page. Empty finds it
automatically.
Levels Up — folders to climb before applying that path. Ignored while
Collection is empty.
Order By — Date Published, Title, File Name. Must match your Collection.
Order Direction — Descending, Ascending. Must match your Collection.
“Previous” Means — Older or Newer. See below.
Which Items Count — Status and Date. These also must match your
Collection. They live here rather than in a group of their own, because Elements
uses “Filters” for CSS filters and two meanings of the word one panel apart is
a trap.

Buttons — the behaviour.

Style — Buttons (a filled box), Text (no box or border), Cards (adds the
item’s feature image).
Show — Both, or One. See “One button” below.
Which One — Next only or Previous only, when showing one.
At The Ends — what the first and last item do when there is no neighbour
that way: Hide the missing button, show it Disabled, or Loop round
to the other end. Loop suits an archive meant to be browsed in a circle.
What Each Button Shows — Show Labels plus editable Previous Label
and Next Label (clear one and it is genuinely gone, not reset to the
default), Show Item Titles, Show Arrows, Show Feature Image.

Font and Text Styles — Font, Size, Weight, Letter Spacing, Capitalisation and
colour for the Label; Font, Size, Weight, Line Height, Maximum Lines and
colour with a hover colour for the Item Title; and the Arrow colour.
Maximum Lines trims a long headline with an ellipsis instead of letting one button
grow taller than the other.

Layout — Gap, Align To Edges, Stack On Mobile.

Sizing — Button Width (Fit text or Equal halves) and Minimum Width, a
floor in rem for when Previous and Next have very different wording but should
still match.

Spacing — Margin (the top value is what separates the buttons from the
content above) and Padding.

Transitions — Hover Transition, Duration, Easing. Applied through Tailwind’s
motion-safe variant, so a visitor who has asked their system for reduced motion
gets the colour change with no animation.

Effects — Shadow, Hover Lift (how far the button rises under the pointer),
Opacity for the whole navigation, and Disabled Opacity for a button with
no neighbour that way.

Background — Background and Background (Hover), from your theme, with
independent light and dark choices.

Borders — Show Border, Width, Style, colour and hover colour, then Corners
— Corner Radius and Image Radius.

Advanced — Diagnostics, CSS Classes, ID.

Not carried over from Elements’ Button: Transforms and CSS Filters (blur,
saturate and friends). Hover Lift covers the one transform a navigation button
actually wants; the rest would be a dozen controls that no prev/next button has
ever needed. Say the word if you disagree — they are cheap to add.

“Previous” means Older or Newer

This is the actual confusion in every blog navigation ever built, so it is a
setting rather than an assumption. Older is the default and is what most readers
expect: Previous goes back in time.

It is decided separately from the sort order, so flipping your Collection to
Ascending does not silently swap your buttons. Which item sits on the older side
is derived from the sort at request time.

With Order By set to Title or File Name there is no older or newer to speak
of, so Previous and Next simply follow the list your readers can see. The
setting stays visible — it still applies the moment you order by date again —
but it has nothing to act on meanwhile.

One button

A single button is not the default, because a pair is what readers expect and
what most people want. But at the end of a set of show notes, one
“Next Episode →” is a stronger call to action than a symmetrical pair, because
it points somewhere instead of offering a choice. Set Show to One and pick
the direction.

Limits worth knowing

These are real and they are stated here because this README is the only support
most people will get.

The Status and Date filters are this component’s own work, not the CMS’s.
Elements does not expose its item filtering to a third-party component at
request time, so this component reads the status: and date: front matter
and applies the same rules the Collection documents. It matches a stock
Collection. It is not the same code, so if Realmac changes those rules this
will need updating — and it is why the settings have to be kept in step by
hand rather than inherited.
Front matter is read simply. The block at the top of each file is parsed
line by line, one nested level deep, which is enough for title, date,
status and an image: block. Anything more elaborate is ignored rather than
misread. Front matter must use spaces, not tabs — a YAML rule, but this is
where you would notice it.
A missing or unreadable date sorts as 1970, which is what the CMS
documents. An undated item therefore sits at one predictable end of the list
instead of wandering. If no item has a date, order by File Name instead — see
above.
The slug is the whole filename, minus .md. A file called
0001-my-song.md is linked by the CMS as ?item=0001-my-song, prefix
included, and that is the form this component writes too. A date-prefixed
spelling without the date is accepted when reading an address, so an older
hand-written link still resolves, but it is never written.
Opening the Item Template page with no item in the address shows the first
item’s navigation rather than nothing, which is what makes Preview useful.
Elements’ own Item behaves the same way. Match Order By and Order Direction to
the Collection and both agree on which item “first” is.
Feature images. A relative image: src: is resolved against
/resources/, where the CMS publishes them. An absolute path or a full URL is
used as it stands. If your images live elsewhere the card style will show a
broken image, and Show Feature Image should be switched off.
It reads the folder on every request. At tens or hundreds of items that is
nothing. At several thousand it is a directory listing and a front-matter read
per item on every page view, and you would want caching this component does
not do.
No drop zones in 1.0. Custom card layouts using {{prev.title}} and
friends are not in this release. Elements resolves such tokens from the CMS’s
own item context, and a third-party component cannot extend that context to
components dropped inside it, so the mechanism has to be this component’s own
token substitution at request time. The design is settled but it needs a real
publish to confirm how a drop zone declared in only one branch of an
edit/published split behaves, and shipping an unverified guess into other
people’s sites is not worth it. Until then the Background, Borders and
Font and Text Styles groups cover the styling.
Why not the CMS JSON API. It would give exact filtering parity, but every
/api/* route — public reads included — requires a Pro licence with JSON API
access for the domain and returns 402 Payment Required without one. This is
a free component that has to work on hosting nobody controls, so it cannot
depend on that.

If nothing appears

Switch Diagnostics on and view the page source. It leaves an HTML comment
saying which folder it used, the slug it read from the address, whether the URLs
are pretty or query-string, how many items passed the filters, where the current
item sat in that list, and what it chose either side. It writes a comment rather
than anything visible, so you can leave it on while a live page is being looked
at. Switch it off when you are done.

The usual causes, in order:

The page is not .php. Nothing renders, by design.
The component is not inside a CMS Item. There is no current item.
The folder was not found. Fill in Collection, and Levels Up if the
content sits above the page. Diagnostics names the folder it settled on.
Only one item passes the filters. With one item there are no neighbours.
Check Status and Date against your Collection.
At The Ends is Hide and you are on the first or last item. That is
correct behaviour — try Disable or Loop to see it.

Doing this without the component

If you would rather not add a server-side component, the same result can be had
in the browser: put a second Collection on the Item Template page pointing at
the same folder with the same sort and filters, hide it with CSS, and let a
small script find the current slug among its links and build the buttons from
the neighbours. Elements’ own filtering then applies for free, which is the one
genuine advantage over this component.

The costs are that every filter and sort setting has to match by hand, Items Per
Page has to exceed your total item count or the chain breaks at the pagination
boundary, and the hidden collection renders one link per item on every post
page. It is a reasonable interim, and it is what this component replaces.

Michael Droste · trumpetstudio.com

MichaelDroste · August 17, 2026, 1:39pm

Fixed Mobile - New Build