Kern 0.12.0 GitHub
Navigation

<kern-link>

Text link for running text, table cells and cards. external opens a new tab (with rel="noopener noreferrer") and marks the link with ↗; tone="muted" for secondary links; disabled keeps the text but removes the link. For actions use kern-button, also when it navigates.

Examples

Links in text and tables

Use kern-link for navigation in running text, table cells and cards. tone="muted" is for secondary links; disabled keeps the text but removes the link.

12 snapshots, the latest from today 09:41. Show all
Open the device page of Bad Lüftung, or Garage Tor (reset, no page).

<p style="margin:0"> 12 snapshots, the latest from today 09:41. <kern-link href="#" tone="muted">Show all</kern-link><br> Open the device page of <kern-link href="#">Bad Lüftung</kern-link>, or <kern-link href="#" disabled>Garage Tor</kern-link> (reset, no page). </p>

External links and downloads

external opens the link in a new tab with rel="noopener noreferrer", shows ↗ and reads label-external to screen readers. download saves the target instead of navigating, optionally under the given file name.

Web UI: 192.168.1.21 Backup: bad-lueftung.json

<p style="margin:0;display:grid;gap:8px"> <span>Web UI: <kern-link href="http://192.168.1.21" external>192.168.1.21</kern-link></span> <span>Backup: <kern-link href="data:application/json,%7B%22name%22%3A%22Bad%20L%C3%BCftung%22%7D" download="bad-lueftung.json">bad-lueftung.json</kern-link></span> </p>

With a SPA router

A plain left click on kern-link emits the cancelable kernNavigate with { href, event }; preventDefault() stops the page load so the app can route itself. Ctrl/Cmd click, middle click, external, target="_blank" and download emit nothing, so "open in new tab" keeps working.

React 19 binds onkernNavigate directly (older versions need addEventListener through a ref); Vue binds @kernNavigate in single-file components.

Open Bad Lüftung or all devices.

Click a link.

<p style="margin:0"> Open <kern-link href="#/devices/bad-lueftung">Bad Lüftung</kern-link> or <kern-link href="#/devices" tone="muted">all devices</kern-link>. </p> <p class="out" style="margin:12px 0 0;font-size:13px;color:var(--text-muted)">Click a link.</p> root.addEventListener('kernNavigate', (e) => { e.preventDefault(); root.querySelector('.out').textContent = 'router.navigateByUrl(' + JSON.stringify(e.detail.href.slice(1)) + ')'; }); <kern-link href="/devices/7" (kernNavigate)="$event.preventDefault(); router.navigateByUrl($event.detail.href)">Bad Lüftung</kern-link> <kern-link href="/devices/7" onkernNavigate={(e) => { e.preventDefault(); navigate(e.detail.href); }}>Bad Lüftung</kern-link> <kern-link href="/devices/7" @kernNavigate="(e) => { e.preventDefault(); router.push(e.detail.href); }">Bad Lüftung</kern-link>

Properties

disabledreflectsdefault false
boolean

Shown as text, not a link.

download
boolean | string | undefined

Download instead of navigate (optionally with this file name).

externalreflectsdefault false
boolean

Opens in a new tab and shows ↗.

href
string | undefined
labelExternalattribute label-external · default opens in a new tab · de öffnet in neuem Tab
string | undefined

Read after the text of external links.

rel
string | undefined

Defaults to noopener noreferrer for external or target="_blank".

target
string | undefined
tonereflectsdefault 'accent'
"accent" | "muted"

muted for secondary links.

Events

kernNavigate
CustomEvent<KernNavigateDetail>

Plain left click (no modifier keys, target, download, external) before the browser navigates. preventDefault() stops the navigation, so a SPA router can take over.

Slots

(default)

Link text

CSS parts

link

The native link