link()

const link: (link: string, options?: Partial<LinkDirectiveOptions>) => DirectiveResult<typeof LinkDirective>;

Links an element to a given path. If the element is an anchor, it will set the href attribute, otherwise it will set a data-href attribute and a role="link" attribute. It will also add a click handler to the element that will navigate to the given path, then.

Parameters

link

string

The link path to navigate to.

options?

Partial<LinkDirectiveOptions>

Additional options for the link directive.

Returns

DirectiveResult<typeof LinkDirective>

Examples

Link an anchor to a route path

<a ${link('/home')}>Home</a>

Link a button to a route path

<button ${link('?menu-visible=1')}>Home</button>

Link to a resource without preventing native behavior

<a ${link('https://example.com/login', { native: true })}>Login</a>

Link a custom element to a route path with a custom role

<custom-button ${link('/login', { role: 'button' })}>Home</custom-button>

Link to a route path with a backlink to the current page

<a ${link('/login', { addBacklink: 'back' })}>Login</a>
<!-- Navigating to /login will result in the URL /login?back=/current/path -->