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

# Variable: uiSref

```ts
const uiSref: (state, params?, options?) => DirectiveResult<typeof UiSrefDirective>;
```

Defined in: [packages/lit-ui-router/src/ui-sref.ts:509](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/ui-sref.ts#L509)

Directive that creates state-based navigation links.

The `uiSref` directive transforms elements (typically `<a>` tags) into
UI-Router navigation links. It automatically generates the `href` attribute
based on the target state and handles click events to perform state transitions.

**Arguments:**

* `state` - The target state name (can be relative like `.child` or `^.sibling`)
* `params` - Optional state parameters (see [RawParams](https://ui-router.github.io/core/docs/latest/interfaces/_params_interface_.rawparams.html))
* `options` - Optional transition options (see [TransitionOptions](https://ui-router.github.io/core/docs/latest/interfaces/_transition_interface_.transitionoptions.html)), plus
  this directive's own (see [UiSrefOptions](../types/UiSrefOptions.md))

## Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `string` |
| `params?` | [`RawParams`](https://ui-router.github.io/core/docs/latest/interfaces/_params_interface_.rawparams.html) |
| `options?` | [`UiSrefTransitionOptions`](../types/UiSrefTransitionOptions.md) |

## Returns

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

## Examples

**Basic usage**

```ts
import { uiSref } from 'lit-ui-router';
import { html } from 'lit';

html`<a ${uiSref('home')}>Go Home</a>`
```

**With parameters**

```ts
html`<a ${uiSref('user.detail', { userId: 123 })}>View User</a>`
```

**With transition options**

```ts
html`<a ${uiSref('dashboard', {}, { reload: true })}>Reload Dashboard</a>`
```

**Relative state references**

```ts
// Navigate to child state
html`<a ${uiSref('.child')}>Go to Child</a>`

// Navigate to sibling state
html`<a ${uiSref('^.sibling')}>Go to Sibling</a>`
```

**On an element that is not a link**

```ts
// `<button>` has no href in HTML; 'auto' keeps the attribute off it.
// Clicking still navigates — the option governs the href only.
html`<button ${uiSref('.new', {}, { assignHref: 'auto' })}>New</button>`
```

## See

* [RawParams](https://ui-router.github.io/core/docs/latest/interfaces/_params_interface_.rawparams.html)
* [TransitionOptions](https://ui-router.github.io/core/docs/latest/interfaces/_transition_interface_.transitionoptions.html)
* [UiSrefOptions](../types/UiSrefOptions.md)
* [DirectiveResult](https://lit.dev/docs/api/custom-directives/#DirectiveResult)