New: Learn Statamic on Laracasts!

We've retired the forum in favor of GitHub Discussions.

New conversations can be started on GitHub. Existing conversations will remain for a while longer.

Head over to GitHub →

How to: Designate top-level nav element as 'active' when it's child is the current page

Brett DeWoody September 12, 2014 by Brett DeWoody

I'm looking for a way to designate the top-level link as active (or current, or whatever you prefer to name it) when one of it's children is the current page.

Here's a pretty standard dropdown nav snippet:

{{ nav from="/" max_depth="2" exclude="jobs" }}
  <li class="divider"></li>
  <li class="{{ if is_current }}active {{ endif }}{{ if children }}has-dropdown {{ endif }}">
    <a href="{{ if children}}#{{ else }}{{ url }}{{ endif }}">{{ title }}</a>
    {{ if children}}
      <ul class="dropdown">
        <li><a href="{{ url }}">{{ title }}</a></li>
    {{ endif }
{{ /nav }}

How can I mark the top-level <li> elements with a class of active if one of it's children is the current page?

Answered by Jason Varga!
>>>>>>> Answered <<<<<<<
4 Replies