Lit UI Router

Appearance

lit-ui-router / uiSref

Variable: uiSref() ​

ts
const uiSref: (...values) => DirectiveResult<typeof UiSrefDirective>;

Defined in: packages/lit-ui-router/src/ui-sref.ts:269

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)
  • options - Optional transition options (see TransitionOptions)

Parameters ​

ParameterType
...values[string, RawParams, TransitionOptions]

Returns ​

DirectiveResult<typeof UiSrefDirective>

Examples ​

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

html`<a ${uiSref('home')}>Go Home</a>`;
ts
html`<a ${uiSref('user.detail', { userId: 123 })}>View User</a>`;
ts
html`<a ${uiSref('dashboard', {}, { reload: true })}>Reload Dashboard</a>`;
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>`;

See ​