Lit UI Router

lit-ui-router / srefActiveClass

Variable: srefActiveClass ​

ts
const srefActiveClass: (params) => DirectiveResult<typeof SrefActiveClassDirective>;

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

Toggles classes in a class attribute by the active state: the attribute-part form of uiSrefActive's classes.

It follows lit's classMap: it must be bound in class, alone or next to static classes, and it only ever toggles the classes it names. Name the state to watch, or leave state out on a wrapper to watch the srefHref links inside it.

It cannot share the attribute with classMap — lit rewrites the whole value when either expression changes, so one directive has to own it. Pass what classMap would have taken as classes instead. For a component that wants plain classMap and its own bindings, use SrefStatusController.

Unlike uiSrefActive, this writes no aria-current — a class binding cannot reach another attribute. Bind srefAriaCurrent beside it.

Parameters ​

ParameterType
paramsSrefActiveClassParams

Returns ​

DirectiveResult<typeof SrefActiveClassDirective>

Examples ​

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

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

In place of classMap

ts
html`<a class=${srefActiveClass({
  state: 'users',
  activeClasses: ['active'],
  classes: { 'nav-link': true, disabled: this.locked },
})}>Users</a>`

Container mode

ts
html`<li class=${srefActiveClass({ activeClasses: ['active'] })}>
  <a href=${srefHref('users')}>Users</a>
</li>`

See ​