link_class

The {{link_class}} helper adds dynamic classes depending on the currently viewed page. If the page slug (e.g. /about/) matches the value given to the for attribute the helper will output a nav-current class. A for value must be provided.

Simple example

<li class="nav {{link_class for="/about/"}}">About</li>

When on the "/about/" URL it will output:

<li class="nav nav-current">About</li>

By default it will output:

<li class="nav ">About</li>

`activeClass`

By default the active class outputted by {{link_class}} will be nav-current, this is consistent with our navigation helper. However it can be overwritten with the activeClass attribute:

<li class="nav {{link_class for="/about/" activeClass="active"}}">About</li>

Will output:

<li class="nav active">About</li>

activeClass can also be given false value (activeClass=false), which will output an empty string. Effectively turning off the behaviour.

`class`

Optionally {{link_class}} can have additional active classes. Using the class attribute will add whatever value has been provided when the link is the active URL, nav-current (the default active class value) will be added last:

<li class="nav {{link_class for="/about/" class="current-about"}}">About</li>

Will output:

<li class="nav current-about nav-current">About</li>

Parent URLs

Not only can {{link_class}} add active classes to current URLs, but it can also apply classes to parent URLs. If a user navigates to /tags/toast/ then {{link_class}} can provide an active class to /tags/ as well as /tags/toast/.

Example

<li class="nav {{link_class for="/tags/"}}">Tags</li>

When on the "/tags/" URL it will output:

<li class="nav nav-current">Tags</li>

When on the "/tags/toast/" URL it will output:

<li class="nav nav-parent">Tags</li>

Getting Started

Core Concepts

Themes

Advanced Tools

Resources

Simple example

`activeClass`

`class`

Parent URLs

Example

​Simple example

​activeClass

​class

​Parent URLs

​Example

Simple example

`activeClass`

`class`

Parent URLs

Example