Link

The ln-link component is applied to table rows, lists, or card containers via data-ln-link to make entire container elements clickable. It listens for click interactions on the container, resolves the first anchor tag (<a>) in document order, and delegates the native .click() to that link, leaving navigation entirely to the browser platform or SPA router.

Clicks originating from nested interactive controls—such as buttons, checkboxes, inputs, or secondary links—are automatically bypassed, keeping them fully functional. When hovering over clickable containers, ln-link displays a subtle bottom status bar mirroring the target URL, providing users with the familiar native browser link preview experience.

Click anywhere on the row — it navigates to the link. Ctrl+click opens in a new tab. Hover shows the URL in the status bar.

Clicking the "Delete" button triggers only the button, NOT the link. Clicking on the other cells navigates.

// Manual initialization of a new DOM element
window.lnLink.init(document.getElementById('new-container'));

ln-link and ln-ajax are fully decoupled — they communicate via native DOM click events:

1. ln-link triggers .click() on <a>
2. ln-ajax intercepts the click event (if present)
3. If ln-ajax is not present — normal navigation

<!-- Both components together -->
<section data-ln-ajax>
    <table data-ln-link>
        <tbody>
            <tr>
                <td><a href="/users/1">Marko</a></td>
                <td>marko@example.com</td>
            </tr>
        </tbody>
    </table>
</section>