How to make a side navigation with links to collection pages?

Design help General
1

Hi there,

I’m trying to make a similar layout to the following site: https://staffansundstrom.com/

Basically I want to have a fixed sided bar with projects (CMS powered and scrollable when overflowing) and next to it the selected project

I’m currently struggling getting this done. I tried with CMS powered tabs (by Finsweet) but then I wouldn’t get a URL for each project and also I couldn’t make the tabs scroll when overflowing its container.

I also tried by copying the side bar to the cms template pages but then I can’t figure out how I can have a selected state for the current project in the side bar.

Would be great if anyone has a good insight on how to best approach this.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi René, welcome to the community.

Your big tab component approach looks like the best way to achieve what you’re trying to do, without a whole lot of scripting.

The scrolling tabs part is easy to fix- here’s a demo.

And the proto-site.

https://preview.webflow.com/preview/aside-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=aside-portfolio&preview=b49975864155d0323d3c5e162a70104b&workflow=preview

The URL changing, which you can also see in the proto-site is a bit trickier and requires a bit of scripting. I took the cleanest approach which is to use a hash to identify the selected tag, rather than a path part e.g. /tab-1.

The CodePen with that script is below, you just put it in the </body> of your page. Click the JS tab, there’s nothing to run there.

Important though, this is based on a non-CMS tab setup, which means the tab name ( text ) is currently the only identifier I have. I haven’t used Finsweet’s CMS tabs, however ideally you want to get the slug of your CMS item into the tab markup, because it’s unique and perfect for your hash. It will have no spaces and be all lowercase like my-cool-artwork.

1 Like
3

Hi Michael thanks so much for your help. Much appreciated.

Thanks for even making a video. The thing is that the scroll works if you don’t use the CMS tabs by finsweet but not when you use it.

Here my read only link: Webflow - Direction Bureaux

And here the published site so you can see it with the cms tabs.
https://styleguide-bbbe84.webflow.io/

Even though I have the tabs-menu on scroll, it somehow doesn’t work. So I assume it has something to do with how the CMS powered tabs work.

4

Fortunately it’s not Finsweet, it’s something to do with the way flexbox settings and scrollbars work, at least on Chrome. Might be a browser bug, but it looks easy to fix-

5

Thanks Michael you are such a champ! Good that it’s such an easy fix. Have a good day.