Add "active" class to current link

Kirby 2 Solved ✅
1

This might be another easy one, but my limited PHP knowledge isn’t helping me.

I basically need a way to add an “active” class to the currently active link of the main page. I’ tried to follow the Custom Menu code in the docs but my page kept bombing.

My markup looks like this right now, not sure what I need to do to add an “active” class to each link (not using a loop so as to keep the li id’s in place). Am thinking to just check If current page is ‘About’ or whatever, echo “class=“active”” or something:

    <nav class="main-nav" role="navigation">
    <ul class="list-nav">
      <li id="firstlink"><a href="<?php echo url() ?>/about">About</a></li>
      <li id="secondlink"><a href="<?php echo url() ?>/process">Process</a></li>
      <li id="thirdlink"><a href="<?php echo url() ?>/projects">Projects</a></li>
      <li id="fourthlink"><a href="<?php echo url() ?>/blog">Blog</a></li>
    </ul>
  </nav>

At a loss.

1 Like
2

You can check if the page is currently open like this:

<li <?php e($page->isOpen(), ' class="active"') ?>>...</li>

I guess you have a reason to add an ID to each li element? You could still use a foreach loop and add an id automatically, e.g. use the uid:

<nav class="main-nav" role="navigation">
  <ul class="list-nav">
   <?php foreach($pages->visible() as $page : ?>
      <li <?php e($page->isOpen(), ' class="active"') ?> id="<?php echo $page->uid() ?>"><a href="<?php echo $page->url() ?>"><?php echo $page->title()->html() ?></a></li>
  <?php endforeach ? ?>
  </ul>
</nav>
3 Likes
3

Well that was simple. Thanks!

Yeah, I need to target the li’s individually for a flexbox thing I’m doing with them. However, that is good to know. I may play with that as well, but for now, the first bit of code was exactly what I was looking for.

4

Hmmmmm, wait, maybe this isn’t quite right. It’s applying the active class on all of my menu links.

OK, I noticed through some other tutorial I had configured a $currentpage variable further down the line (was using it to assign the page name as a class name to a section). That looked like so:

<?php $currentpage = $page->title()->html();
      $currentpage = strtolower($currentpage);
 ?>

I pulled that code up so I could use it here, and did this:

<?php if($currentpage == "about" ) { echo ' class="active"';} ?>

Not the most ideal way to do it (not even 100% certain on syntax?) but it gets the job done.

5

This is a bit strange, the code works for me and is also documented in the docs: http://getkirby.com/docs/solutions/menus

Are the pages you are using subpages of another page? How is $page defined?

6

It doesn’t work in his case because he doesn’t use a loop to construct the menu, so that $page is the same for every menu item. In order for the code snippet to work in his case he’d have to adjust it slightly for each menu item, maybe like so:

...
<li <?php e($site->page('about')->isOpen(), ' class="active"') ?>>...</li>
<li <?php e($site->page('process')->isOpen(), ' class="active"') ?>>...</li>
...
7

Oh yes, your are right, didn’t think of that … :pensive:

8

Yep, that does it. It’s a bit shorter than what I’m using so I’ll go this route.

Thanks for both of your help!

9

5 posts were split to a new topic: Adding active class to active menu link