How to do this?



I’m developing a site and I would like to implement the same functionality as this page from Kirby website.

Basically, I need to show the contents of whatever Category is clicked on the side. I noticed the page is partially refreshing because I can see the loading animation of the browser but the other contents of the page don’t refresh I guess.

I really never implemented this functionality before. My previous solution was to list all the contents of each category on its own section. But I really like this filtering functionality.

I’m not looking for the exact codes to do it. I just need a heads up on what to read or learn to achieve this.
Is it being done by a js script? php?



There is not JavaScript involved and the page is fully reloaded, it just works with links with a category parameter:

Basically the same as explained in this cookbook recipe:



Thank you so much for these links.
I am now trying to understand the code and process but I was stuck at this code taken from the controller\cookbook.php

if ($category = get('category')) {
    $recipes = $page->recipes($category);

Where did the ->recipes($category) came from? I’m referring to the word “recipes” because it’s not a method (is that what they are called?) like “get”, “title”, etc.



It’s defined in a page model


namespace Kirby\Site\Models;

use Kirby\Cms\Page;

class CookbookPage extends Page

    public function recipes(string $category)
        return $this->index()->filter(function ($recipe) use ($category) {
            return $recipe->parent()->slug() === $category ||
                   in_array($category, $recipe->secondary()->split(','));


Done! Thank you so much.
I was able to implement what I needed.

Now how would I make it so it shows the contents of the first Category upon page load? Currently, it’s showing all grandchildren of the main page.