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

# Class: SrefActiveClassDirective

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

The attribute-part sibling of [UiSrefActiveDirective](UiSrefActiveDirective.md)'s class
handling, with the contract of lit's
[classMap](https://lit.dev/docs/templates/directives/#classmap):
bound in `class`, alone or beside static classes, and toggling only the
classes it names.

The first commit writes the whole class list — statics plus whichever of
ours apply — as `classMap` does, which is also what a server rendering
`render()` alone would emit. Every commit after that toggles names on
`classList`, so classes something else added to the element survive.

## See

[srefActiveClass](srefActiveClass.md) for the public API

## Extends

* [`SrefStatusDirective`](SrefStatusDirective.md)<[`SrefActiveClassParams`](../types/SrefActiveClassParams.md), `string` | *typeof* `noChange`>

## Properties

| Property | Modifier | Type | Description | Inherited from | Defined in |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `directiveName` | `protected readonly` | `string` | the public function's name, for errors and warnings | [`SrefStatusDirective`](SrefStatusDirective.md).[`directiveName`](SrefStatusDirective.md#directivename) | [packages/lit-ui-router/src/sref-active.ts:101](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-active.ts#L101) |
|  `params` | `public` | | [`SrefActiveClassParams`](../types/SrefActiveClassParams.md) | `undefined` | the last params `update()` saw | [`SrefStatusDirective`](SrefStatusDirective.md).[`params`](SrefStatusDirective.md#params-1) | [packages/lit-ui-router/src/sref-active.ts:75](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-active.ts#L75) |
|  `status` | `public` | [`SrefStatus`](../types/SrefStatus.md) | `undefined` | merged status of every target, or `undefined` before there is one | [`SrefStatusDirective`](SrefStatusDirective.md).[`status`](SrefStatusDirective.md#status) | [packages/lit-ui-router/src/sref-active.ts:77](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/sref-active.ts#L77) |

## Methods

### render()

```ts
render(params): string | typeof noChange;
```

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

The classes that apply, space-padded to keep clear of the statics; or
`noChange` before a status exists.

#### Parameters

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

#### Returns

`string` | *typeof* `noChange`

#### Overrides

[`SrefStatusDirective`](SrefStatusDirective.md).[`render`](SrefStatusDirective.md#render)