Simple previous and next links for projects?

I am trying to build a simple “previous project” and “next project” link in my portfolio section.

If found a Finsweet tutorial here but it creates a graphic link.

Ideally I would like to just implement the design the designer has given me — that is simple text links that just say “previous project” and “next project”.

I can adapt the Finsweet code to just give me the project name (instead of “previous project” and “next project”) but I cannot get the previous to left-justify and the next to right-justify. It seems they both have to be aligned the same.

I hadn’t expected next / previous to be so complicated in Webflow.

Any help would be greatly appreciated.


Here is my [site Read-Only](Webflow - Lemonsnap

Whilst there isn’t a Webflow-simple way of doing this just yet, there’s a great write-up on how to achieve Previous and Next buttons on collection pages with a teency bit of custom code.

I’ve used this on a few projects and I believe it does what you’re asking for.

Oh and you can also upvote this wishlist item to encourage Webflow to consider adding this feature.

Hey @williamb !

We are working on new solutions for CMS Previous Next, for now we have a workaround to make it work. I created this solution for you and added to our Attributes Combos Cloneable.

You can check here working: How to improve Web Design Process
You can clone the project here: Attributes Combos - Webflow

Let me know if you need any help,

Eve Kayser

Hey Eve, I appreciate that you are working on a new version but it doesn’t seem that the new version is solving the problems I have with the current version.

  1. I would like the links to say “next project” and “previous project” rather than uses elements from the project itself

  2. I would like to have the links left-justified and right-justified respectively rather than both justified the same.

I have implemented the “current” Finsweet solution here.

Ideally I would be able to solve both gaps above, but let’s just say I was good with using the project name (instead of “previous project” and “next project”). Is there a way to simulate left-justification and right-justification using this method?

I am having difficulty figuring a way to do this because both “buttons” are being drawn from a list with consistent formatting.

If your new version solves one or both of these problems, I apologize. Please let me know.


Link to my read-only

Hi @williamb Did you check here? I recreated exactly what you need on this build:

You can style the way you want with left-right justified.

Please, clone the project, try to replicate what I did and let me know if you need any help :wink:

Eve Kayser

Hey Eve

Thank you - that does appear to be what I would like to do.

I cloned the project but I am having trouble figuring out how you did it.

When I used the other Finsweet “next - previous” solution, I could edit the “full” (vs empty) state of the buttons in a hidden collection list lower down. However, I cannot see where you are drawing these full state presentations from.

There are two hidden collection lists lower down (I thought maybe one for next and one for previous) but they appear to be categories, not buttons.

Also, in the other Finsweet solution I needed to embed code, but I don’t see any embedded code here.

Sorry, just a bit confused. Very thankful for any help.


Hi @williamb sure no problem, thanks for your feedback.

Sharing the video below trying to help:

Let me know if you need more help :wink:

Eve Kayser

Hey Eve. Thanks again for taking this time.

I am pretty sure I did what you said and it looks like a great start. If I understand correctly, this is exactly what I had been hoping for.

However, I am just getting the text blocks with no link. Now I am still including the embed for the other Finsweet solution. Should I switch it to a different embed for this one? If so, where do I find the code for the embed?

Monosnap screencast 2022-12-14 21-20-01

Thanks so much

Hi William, try to connect the dynamic link to the Current page.

Eve Kayser

Thank you, Eve. That certainly did something and I can navigate through the projects now but there are a couple of problems.

One, I still get a link for next / previous when there isn’t one. I expected something like that because I know we haven’t dealt with the “empty” state yet.

Also, the actual text “next project” and “previous project” are not the links but the empty space just before / after them — so something is not quite right there either.

Monosnap screencast 2022-12-17 23-39-05

But I am making progress! What am I doing wrong?

Thanks so much

Hi @williamb please check the build I shared with you and try to replicate the structures/attributes. I shouldn’t be that difficult. If you go step by step you will be able to make it work.

Eve Kayser

Hi @evekayser The problem with the next link seems to be because I have added a utility class to right-justify the block. When I remove that, the link itself is active rather than the space to the left of it.

I am not sure how to get the two links aligned differently without disrupting the code.

Hi @williamb for some reason it is loading as a grid:

Try to remove this child’s positions:

Remove the empty blocks for now, try to add it later when the links are working:

Set the collection list as relative too:

Eve Kayser

Thank you, Eve. I have made the suggested changes, but the behaviour remains the same. Is it possible I just cannot add the utility class to right-justify “next project”?

No, that wasn’t it. I removed the utility class and and right justified the text block (with it’s own utility class). I had hoped that would fix it but the behaviour is still the same.

Looking at the source code, the text and the link seem to be coming up as separate, overlapping but not nested objects.

Hey Eve, I got the “next project” button to work (mostly) even right justified. I added right justification to the block above it. Oddly, that didn’t seem to change the class for that block otherwise “previous project” would also be right justified… but I am not worried about that.

For some reason the link is only associated with “next pro” and the “ject” does not seem to be active. If anyone can figure out why that is happening, it would be awesome.

The next thing is to add the empty states. I tried mimicking what was done in the example, but I ended up getting both the “next” (non-empty) and the “next-empty” state showing at the same time when only “empty” should be showing. I backed that out because it wasn’t working anyway and I was worried it might be muddying the waters with the “half-link” issue above.

I would greatly appreciate it if anyone could help with either issue:

  1. the half-link on “next project” or
  2. how to add empty states to next and previous (ideally I would show nothing if there was no next or no previous project)

Thanks so much!

Here is the link to my read-only

Here is the link to the project template on the published site.

Hi @williamb for example you can add a div block with white backgroudn and position absolute to work as an empty state:

Remember to add th empty attribute to it: