Couldn’t really find anything on this so I thought I might ask. I build a few pages with Kirby now following the “basic” structure: Having multiple pages filled with content and loading those when a user clicks on a menu item, you know the drill. But how would I setup my page when for example I want all the content to get loaded into a div and get replaced dynamically without loading an actual new page. For example having multiple projects and a two column layout where on the left I just have a list of the project names and on the right I display all the infos from the corresponding project.yml.
That’s a typical use case for an Ajax request. You can use content representation for this purpose, see also Load more with Ajax | Kirby CMS
There’s also libraries like Swup.js or similar which might work for this use case, not sure: https://swup.js.org/
have a look into javascript tab systems, which can also do this kind of thing. Traditionally, these have tabs running along the top like this one Vanilla JavaScript tabs - a tiny select tag replacement. which is a bit old now but still good… really its just swapping the corrisponding divs out from the list. Get clever with the css and im sure you can lay it out the you want, with verticle tabs. The javascript is really just toggling some classes.
There are loads of tab scripts out there - google around, you probably find one that will work for you.
Take care to implement stuff like lazy loading though, because if your dumping a whole looad of project images into one page, it will be quite heavy. You should offset that somehow.
Pretty sure that Swup that @pixelijn mentioned can do it to, as you can use that to define an area on the page to replace.