Adding classes to active filters

I’m having some difficulty with something pretty simple in my opinion, but I’m probably missing something quite basic. Following the recipe Filter collections by tags, I created a menu to filter a collection of projects. I am trying to add an “active” class to the menu item when selected, but I guess isActive() and isOpen() are not the right way. Would appreciate any help. Thanks


return function($page) {

  // fetch the basic set of pages
  $projects = $page->children()->listed();

  // fetch all categories
  $category = $projects->pluck('category', ',', true);

  // add the category filter
  if($category = param('category')) {
    $projects = $projects->filterBy('category', $category, ',');

  return compact('projects', 'category');


And then:

$categories = $site->find('works')->children()->listed()->pluck('category', ',', true);
  <?php foreach($categories as $category): ?>
  <li //Add the active class here>
    <a href="<?= url('works', ['params' => ['category' => $category]]) ?>">
      <?= html($category) ?>
  <?php endforeach ?>

This should work:

  <li class="<?= param('category') == $category ? 'active' : '' ?>">
    <a href="<?= url('works', ['params' => ['category' => $category]]) ?>">
      <?= html($category) ?>

Worked like a charm :wink: Thanks for the super fast reply!

1 Like

I also want to add a css class to an active filter. But my filter works a little bit different, because I built it like in this video:

So my url is like this:


How can I tell Kirby if the part after the = in the url is the same as the filter menu option, it should print something?

My controller:

return function($site) {

    $filterBy = get('filter');

    $projects = $site
    ->when($filterBy, function($filterBy) { 
        return $this->filterBy('category', $filterBy); 

    return [
        'filterBy' => $filterBy,
        'projects' => $projects

My template:

<div class="cat-list">
    <a class="cat-button" href="<?= $page->url() ?>">Alle</a>
    <?php foreach ($site->find('Projekte')->category()->split() as $category): ?>
        <a class="cat-button" href="<?= $page->url() ?>?filter=<?= $category ?>"><?= $category ?></a>
    <?php endforeach ?>

The css class "active" should be added to the <a>

Thank you.

Like this, using get() instead of param()

 <a class="cat-button<?= get('filter') == $category ? ' active' : '' ?>" href="<?= $page->url() ?>?filter=<?= $category ?>"><?= $category ?></a>
    <?php endforeach ?>
1 Like

Ah nice! Kirby is so easy when you know how it works :sweat_smile: