Creating a site similar to "read the docs"

Hi all!

I was wondering if anyone had any on advice on how to make a website with the cms that has a layout similar to this sort of thing.

Where you have categories on the side, and nested pages for different bits on the side.

I was looking for examples of somebody attempting something similar, but can’t find anything. Perhaps it’s not possible without nested CMS collections.

You should be able to by using reference fields as shown in the image below:

1 Like

Thanks! I’ll give it a shot!

If that doesn’t suit what you need you can always use gitbook.com. It’s great and it’s free. I only say that because they have certain tools in there (like H1 & H2 Indexing for example among others) that you couldn’t do with Webflow currently. You can however still create a doc site with Webflow. I just don’t know exactly how extensive you need it, which would really be the determining factor.

1 Like

What I’m making is more a small scale tutorial site, but i wanted to use this style of layout because of the clear progression it has. Thanks!

So even if it’s a bit janky i’m happy if i can make it in webflow.

Yeah, if the nesting isn’t as deep. You can definitely achieve this in Webflow! Just get creative and have fun doing it! :slight_smile:

2 Likes

Hi Noah! I am trying to do the same thing as the OP. Could you explain how reference field would help achieve that?

Hey @jessie8o8 if you’re talking about the left nav with the sections, you really can’t in Webflow natively. In theory you could create a master Toc collection list that shows the ordered list of sections, with a nested list of pages, however Webflow’s 5 nested item limit will likely bite you.

You could do custom code, or use Finsweet’s CMS Nest to overcome some of that.

The approach I prefer right now is to simply have the Pages collection ordered, and then have an optional field which is a section heading. It’s a visual grouping only, basically if the section heading field exists, you render a section heading just before that item. Much easier to manage.

I use that approach here-