Can I set a current state on buttons inside a collection list?

Design help General
1

If I use a Collection list containing buttons and put this inside a Collection template page I can use the collection list as a sub menu hack to browse between the different items in the collection list.

But, there is no out-of-the-box function to set a current state on the buttons in the collection list to show what button is the current page, as you get on normal pages.

Anybody done this before or knows of a solution? I really miss a dedicated dynamic sub menu element for navigating between collections items.

Live example

Same example in Webflow preview

2

Hello @Christoffer

There is a way to achieve this. I created a small video to show how you can build that:

http://cloud.ipagroup.co/q2Ms

Let me know if that helps.

1 Like
3

Hi @aaronocampo

Brilliant! Was playing around with visibility conditions now and had an ok solution, but this was way better. Much appreciated! :smiley:

1 Like
4

I’m glad I could help.

1 Like
5

Hi @aaronocampo - the link to your video is down. I really need the same solution! And thank you for the excellent videos as seen on your site.

1 Like
6

Thanks for the kind words:

Here’s the video re-uploaded Webflow current state.mp4 - Droplr

1 Like
7

Does anyone know how to do exactly this, but on the Nav Menu’s link buttons instead of a regular button? The Condition settings don’t seem to be present.

I’m looking for the collection page (all blog posts, or products, or podcasts, or whatever else the collection is) to trigger the main site menu to show the parent category page (/blog, /product, /podcast, etc. respectivly) item as “current”.

(Edit: In case anyone is curious, I’m currently solving this by having multiple versions of my navigation as a symbol, and applying the correct version of the symbol to the collection list page (again, /blog, /product, /podcast, etc.)

8

Hey @chaseraz don’t know if you solved your problem, but I just found a solution that worked for me. It was a slight variation of the solution in post #30141.

I gave each of the main nav menu items (inside a symbol for me) an ID eg #menu-item-articles

Then in the custom code for the CMS Collection Page template I added the following script before the body tag:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
$('#menu-item-articles').addClass("w--current");
});
9

I cant find the option of the current page anymore. Is it removed?