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

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

Hello @Christoffer

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

Let me know if that helps.

1 Like

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

I’m glad I could help.

1 Like

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

Thanks for the kind words:

Here’s the video re-uploaded https://d.pr/v/M8w4iI

1 Like

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.)

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");
});