My use case is like creating a document view. I want to create docs for the DhiWise, and on the screen, I want a navigation view on the left side and active navigation to show content in the center part like this(Build a Flutter App | Introduction to DhiWise - DhiWise). Currently, I can’t do this in Webflow CMS. Can you guide me on how to do this?
Here is my public share link: LINK
(how to access public share link)
Hi Parul, there may be a good JS library for this but typically I’d build it using my own custom JavaScript for flexibility.
How you do that will depend a lot on the data you’re storing and structuring, and exactly how you want the resulting navigation to look & function.
Administration will be very important to consider as well, so I’d avoid weird nested structures that are difficult to maintain.
One approach I have used in the past for excessively complex nav structures is to capture all of the navigation content as a list in a rich text field field, and then parse that with Javascript. The advantage is that your ordering, links, names and depth are all controlled in one place - however it’s a bit of engineering to turn that into a hierarchy, and then into a smart navigation.
This is a really quick and crude example. So, I hope it helps! But if I were trying to recreate the example page, I would create a section, turn it into a grid, and alter the proportion with FRs to what I wanted. Then, I would use a CMS List inside a div block and link it to the CMS collection you want to allow visitors to navigate through. Just add a link text and connect it to the name and links of the CMS collection. Navigation done. (I don’t know how you would do the nested drop-down nav. You might want to experiment with a navbar somehow. I don’t know if that would work, but I’ve never tried.)
I would use the other half of the grid for the content and place it in the desired elements. For your documents, just adding a header, summary, and Rich Text (where you can place the text and gifs) would be enough. Link those to the CMS. Then, you can follow a tutorial to link your next and previous buttons.
This is one way to do it: Native linking to previous and next post or page using CMS - #11 by buryat
But you could also use FinSweet’s method too. https://www.youtube.com/watch?v=XhaEkmFx2x0
Anyway, I hope this helps!
*edit. Just realized that the nested feature was exactly what you were trying to achieve. I’ll mess around and see if I can get something to work. But I’m not sure of a solution off the top of my head. I know it’s possible with nav bars. But I’ve never combined that with cms collections.
edit answer Here is a video that should help: You can use a collection list inside of a drop-down and just add a filter. You could always create a drop-down field for articles with a list of categories and filter each drop-down based on those categories.
