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

# Variable: srefHref

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

Defined in: [packages/lit-ui-router/src/sref-href.ts:296](https://github.com/simshanith/lit-ui-router/blob/484d5b6f801bd2d78808d4bf98f398a619509f11/packages/lit-ui-router/src/sref-href.ts#L296)

Binds a state's `href` to an attribute: the attribute-part form of
[uiSref](uiSref.md).

The two do the same job — generate the `href`, navigate on click, announce
the target to an enclosing [uiSrefActive](uiSrefActive.md) — and differ only in where
they sit. `uiSref` is an element part, which only a live browser can see;
this one *is* the `href`, so a static analyser reads the link the way the
browser does, and a server renderer can once it has a router to offer.
Use one or the other on an element, never both.

**Arguments** are [uiSref](uiSref.md)'s: the state name, its params, and core's
transition options. There is no `assignHref` — the attribute is the
binding, so it is written wherever it was bound.

## Parameters

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

## Returns

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

## Examples

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

html`<a href=${srefHref('users.detail', { userId: 123 })}>View User</a>`
```

**With srefActiveClass and srefAriaCurrent**

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

## See

* [uiSref](uiSref.md)
* [srefActiveClass](srefActiveClass.md)
* [srefAriaCurrent](srefAriaCurrent.md)