Folder Tabs + File Sidebar Navigation

I’ve been looking for a bit on how to pull this off with Modx and can’t seem to find anything. What I need is a system of displaying only the 5 folders of my site and hiding links to their pages until the user clicks on one of the files located at the top of the template. At that time they’d be taken to the index page of that folder and a sidebar providing the navigation for that folder would appear. I’ve hastily drawn an example of what I’m interested in using.

granted the artwork is rushed but the basic idea is there, with the current folder highlighted (folder 2) and the user’s current page (file 2 of folder 2) highlighted on the sidebar. When switching to another folder (say folder 1) the index page (webpage file 1) would come up and highlight the first option in the sidebar navigation.

As I said, I’ve yet to find the tools to implement this and would very much appreciate whatever help anyone could provide.

Hi,

first of all I advice you to browse the web and find a website with similar feature or find the needed js script or css.
Or else if you’re skilled enough produce your own.
Once you’ve got this sample as a raw html file with the needed components, try to produce the same using the wayfinder snippet which allows a high degree of customisation.

:-)

Doable. And I love the artwork.

Simple solution? Use Wayfinder twice - once without subfolder items to do the folders, and then again for just the folder you’re on. (Which can be done with a call from the root and the right stuff).

Put the home page at the root, but have it set to not shown on menu. Possibly, use a different template on the home page that doesn’t have the second Wayfinder call.

More complicated solution? Use Wayfinder once, with CSS positioning to get the folder items in the right place.

For the topmenu:

[[Wayfinder? &startId=`0` &level=`1`]]

For the side menu:

[!Wayfinder? &startId=`[[UltimateParent]]`!]

And in each of the top folder documents, use [[FirstChildRedirect]] to make it go to the first subdocument of that folder.

Then style with css: Layout, sidemenu and topmenu. (more menu style examples and layouts)

Thank you so much for the help, though I can’t get the FirstChildRedirect to work even after trying [[FirstChildRedirect &docid=`1`]] where 1 should direct to my home page.

[EDIT] I found the problem which dealt with caching.

No, docid parameter is:

* &docid=`12`
* Use the docid parameter to have this snippet redirect to the
* first child document of the specified document.

To get the snippet working, you would simply place [[FirstChildRedirect]] to the "Site Folder 2" document in your drawing and when users click the Site Folder 2 link at top menu, they will be automatically redirected to the first document in that folder, which in your drawing wold be "various", if those sidemenu lines would be thought as menu items..