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

# Class: UiSrefDirective

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

Directive class that creates state-based navigation links.

This directive is used internally by the [uiSref](uiSref.md) directive function.
It transforms elements (typically `<a>` tags) into UI-Router navigation links
by setting the `href` attribute and handling click events.

## See

* [uiSref](uiSref.md) for the public API
* [AsyncDirective](https://lit.dev/docs/api/custom-directives/#AsyncDirective)
* [StateService.go](https://ui-router.github.io/core/docs/latest/classes/_state_stateservice_.stateservice.html#go)

## Extends

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

## Properties

| Property | Type | Default value | Description | Defined in |
| ------ | ------ | ------ | ------ | ------ |
|  `href` | `string` | `null` | `null` | the href computed for the target, or null when there is none | [packages/lit-ui-router/src/ui-sref.ts:164](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref.ts#L164) |
|  `options` | [`TransitionOptions`](https://ui-router.github.io/core/docs/latest/interfaces/_transition_interface_.transitionoptions.html) | `{}` | the transition options from the last render | [packages/lit-ui-router/src/ui-sref.ts:150](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref.ts#L150) |
|  `params` | [`RawParams`](https://ui-router.github.io/core/docs/latest/interfaces/_params_interface_.rawparams.html) | `{}` | the target state params from the last render | [packages/lit-ui-router/src/ui-sref.ts:148](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref.ts#L148) |
|  `state` | `string` | `null` | `null` | the target state name from the last render | [packages/lit-ui-router/src/ui-sref.ts:146](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref.ts#L146) |
|  `targetState` | | [`TargetState`](https://ui-router.github.io/core/docs/latest/classes/_state_targetstate_.targetstate.html) | `null` | `null` | the resolved target, or null until the router is found | [packages/lit-ui-router/src/ui-sref.ts:166](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref.ts#L166) |
|  `uiSrefOptions` | [`UiSrefOptions`](../types/UiSrefOptions.md) | `{}` | this directive's own options, stripped from the transition options | [packages/lit-ui-router/src/ui-sref.ts:161](https://github.com/simshanith/lit-ui-router/blob/92660184d9980e90964f7e785d5efeb5cae43b42/packages/lit-ui-router/src/ui-sref.ts#L161) |

## Methods

### getOptions()

```ts
getOptions(opts?): TransitionOptions;
```

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

the transition options with `relative` defaulted to the enclosing view

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `opts?` | [`TransitionOptions`](https://ui-router.github.io/core/docs/latest/interfaces/_transition_interface_.transitionoptions.html) |

#### Returns

[`TransitionOptions`](https://ui-router.github.io/core/docs/latest/interfaces/_transition_interface_.transitionoptions.html)