> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ghost.org/llms.txt
> Use this file to discover all available pages before exploring further.

# link_class

> Usage: `{{link_class for="/about/"}}`

***

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

```html theme={"dark"}
<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](/themes/helpers/data/navigation/). However it can be overwritten with the `activeClass` attribute:

```html theme={"dark"}
<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:

```html theme={"dark"}
<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

```html theme={"dark"}
<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>
```