Lit UI Router

Appearance

lit-ui-router / uiSrefActive

Variable: uiSrefActive() ​

ts
const uiSrefActive: (
  ...values
) => DirectiveResult<typeof UiSrefActiveDirective>;

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

Directive that adds CSS classes based on active router state.

The uiSrefActive directive watches the current router state and applies CSS classes to elements when their associated states are active. It supports both "active" classes (applied when the state or any child state is active) and "exact" classes (applied only when the exact state is active).

Arguments:

  • params - Configuration object (see UiSrefActiveParams) with activeClasses, exactClasses, and optional state/params

Parameters ​

ParameterType
...values[Partial<UiSrefActiveParams>]

Returns ​

DirectiveResult<typeof UiSrefActiveDirective>

Examples ​

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

html`
  <a ${uiSref('home')} ${uiSrefActive({ activeClasses: ['active'] })}> Home </a>
`;
ts
html`
  <a
    ${uiSref('users')}
    ${uiSrefActive({
      activeClasses: ['nav-active'],
      exactClasses: ['nav-exact'],
    })}
  >
    Users
  </a>
`;
ts
html`
  <nav ${uiSrefActive({ activeClasses: ['section-active'] })}>
    <a ${uiSref('users')}>Users</a>
    <a ${uiSref('users.list')}>List</a>
    <a ${uiSref('users.create')}>Create</a>
  </nav>
`;
ts
html`
  <div
    ${uiSrefActive({
      state: 'dashboard',
      activeClasses: ['dashboard-active'],
    })}
  >
    Dashboard content
  </div>
`;

See ​