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

# Class: UiSrefActiveDirective

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

Directive class that adds CSS classes based on active state.

This directive is used internally by the [uiSrefActive](uiSrefActive.md) directive function.
It watches the current router state and applies CSS classes to elements
when their associated states are active.

The directive can operate in two modes:

1. **Explicit state**: Provide a state name to watch
2. **Container mode**: Automatically watch nested uiSref directives

## See

* [uiSrefActive](uiSrefActive.md) for the public API
* [AsyncDirective](https://lit.dev/docs/api/custom-directives/#AsyncDirective)
* [SrefStatus](../types/SrefStatus.md)

## Extends

* [`AsyncDirective`](https://lit.dev/docs/api/custom-directives/#AsyncDirective)

## Properties

| Property | Type | Default value | Description | Defined in |
| ------ | ------ | ------ | ------ | ------ |
|  `active` | `boolean` | `undefined` | `undefined` | whether any target is active, or undefined before the first status | [packages/lit-ui-router/src/ui-sref-active.ts:259](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref-active.ts#L259) |
|  `activeClasses` | `string`\[] | `[]` | classes applied while any target is active | [packages/lit-ui-router/src/ui-sref-active.ts:230](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref-active.ts#L230) |
|  `ariaCurrentValue` | | `false` | [`AriaCurrentValue`](../types/AriaCurrentValue.md) | [`AriaCurrentValues`](../types/AriaCurrentValues.md) | `undefined` | `undefined` | undefined = default (on for link elements) | [packages/lit-ui-router/src/ui-sref-active.ts:234](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref-active.ts#L234) |
|  `entering` | `boolean` | `undefined` | `undefined` | whether a running transition enters a target | [packages/lit-ui-router/src/ui-sref-active.ts:263](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref-active.ts#L263) |
|  `exact` | `boolean` | `undefined` | `undefined` | whether any target is exactly active, or undefined before the first status | [packages/lit-ui-router/src/ui-sref-active.ts:261](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref-active.ts#L261) |
|  `exactClasses` | `string`\[] | `[]` | classes applied while any target is exactly active | [packages/lit-ui-router/src/ui-sref-active.ts:232](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref-active.ts#L232) |
|  `exiting` | `boolean` | `undefined` | `undefined` | whether a running transition exits a target | [packages/lit-ui-router/src/ui-sref-active.ts:265](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref-active.ts#L265) |
|  `options` | [`TransitionOptions`](https://ui-router.github.io/core/docs/latest/interfaces/_transition_interface_.transitionoptions.html) | `{}` | the explicit target transition options | [packages/lit-ui-router/src/ui-sref-active.ts:256](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref-active.ts#L256) |
|  `params` | [`RawParams`](https://ui-router.github.io/core/docs/latest/interfaces/_params_interface_.rawparams.html) | `{}` | the explicit target state params | [packages/lit-ui-router/src/ui-sref-active.ts:254](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref-active.ts#L254) |
|  `state` | `string` | `undefined` | `undefined` | the explicit target state name, or undefined in container mode | [packages/lit-ui-router/src/ui-sref-active.ts:252](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref-active.ts#L252) |
|  `targetStates` | `Set`<[`TargetState`](https://ui-router.github.io/core/docs/latest/classes/_state_targetstate_.targetstate.html)> | `...` | every target this directive watches: the explicit one, or the enclosed links' | [packages/lit-ui-router/src/ui-sref-active.ts:268](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref-active.ts#L268) |