---
url: https://lit-ui-router.dev/api/reference/directives/srefActiveClass.md
---
[lit-ui-router](../index.md) / srefActiveClass

# Variable: srefActiveClass

```ts
const srefActiveClass: (params) => DirectiveResult<typeof SrefActiveClassDirective>;
```

Defined in: [packages/lit-ui-router/src/sref-active.ts:625](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-active.ts#L625)

Toggles classes in a `class` attribute by the active state: the
attribute-part form of [uiSrefActive](uiSrefActive.md)'s classes.

It follows lit's
[classMap](https://lit.dev/docs/templates/directives/#classmap): it
must be bound in `class`, alone or next to static classes, and it only ever
toggles the classes it names. Name the state to watch, or leave `state` out
on a wrapper to watch the [srefHref](srefHref.md) links inside it.

It cannot share the attribute with `classMap` — lit rewrites the whole
value when either expression changes, so one directive has to own it. Pass
what `classMap` would have taken as `classes` instead. For a component that
wants plain `classMap` and its own bindings, use
[SrefStatusController](../controllers/SrefStatusController.md).

Unlike `uiSrefActive`, this writes no `aria-current` — a `class` binding
cannot reach another attribute. Bind [srefAriaCurrent](srefAriaCurrent.md) beside it.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `params` | [`SrefActiveClassParams`](../types/SrefActiveClassParams.md) |

## Returns

[`DirectiveResult`](https://lit.dev/docs/api/custom-directives/#DirectiveResult)<*typeof* [`SrefActiveClassDirective`](SrefActiveClassDirective.md)>

## Examples

```ts
import { srefHref, srefActiveClass } from 'lit-ui-router';
import { html } from 'lit';

html`<a href=${srefHref('users')}
        class="nav-link ${srefActiveClass({ state: 'users', activeClasses: ['active'] })}">
  Users
</a>`
```

**In place of classMap**

```ts
html`<a class=${srefActiveClass({
  state: 'users',
  activeClasses: ['active'],
  classes: { 'nav-link': true, disabled: this.locked },
})}>Users</a>`
```

**Container mode**

```ts
html`<li class=${srefActiveClass({ activeClasses: ['active'] })}>
  <a href=${srefHref('users')}>Users</a>
</li>`
```

## See

* [uiSrefActive](uiSrefActive.md)
* [srefAriaCurrent](srefAriaCurrent.md)
* [SrefStatusController](../controllers/SrefStatusController.md)