How does it work?
- On init, it scans all
<a>elements inside<nav> - It compares the
hrefof each link withwindow.location.pathname - Adds a CSS class to matching links
Overview & How It Works
The ln-nav component is applied to navigation containers via <nav data-ln-nav="active"> to manage active link highlighting automatically. On initialization and whenever browser navigation occurs (via popstate or pushState AJAX requests), it scans all child <a> tags and compares their href attributes with the current window.location.pathname.
The link matching the active route automatically receives the specified CSS class (e.g. .active) and the accessibility attribute aria-current="page", while inactive sibling links are cleaned up. It operates completely autonomously with zero configuration or manual route-highlighting code.
Basics
| Attribute | On element | Value | Description |
|---|---|---|---|
data-ln-nav | <nav> | CSS class | Activates nav highlighter |
Example: data-ln-nav="active" — the link receives class .active when it is active.
Behavior and Match Rules
Match Rules
| Rule | Example | Result |
|---|---|---|
| Exact match | /users on /users | ✓ Match |
| Parent match | /users on /users/123 | ✓ Match |
| Root special | / only on / | ✓ Exact only |
| Trailing slash | /users/ == /users | ✓ Normalized |
Example — Multiple Navigations
Top Navigation
Side Navigation
Reactivity with AJAX and Browser History
pushState (AJAX navigation)
When ln-ajax changes the URL via pushState, ln-nav automatically updates the active classes.
popstate (browser back/forward)
On browser back/forward, ln-nav listens to the popstate event and updates the active classes.
Dynamically added links
New links added via JavaScript (MutationObserver) are automatically processed.
Exact matching — data-ln-nav-exact
By default, ln-nav uses prefix matching: /users activates on /users/42. Add data-ln-nav-exact to require a strict URL match only.
Active links also receive aria-current="page" automatically (removed from inactive links).