NavLink

NavLink renders an anchor with active-state styling and client-side navigation when the Resuma runtime is loaded.

Basic usage

view! {
    <nav>
        <NavLink href="/" activeClass="active">"Home"</NavLink>
        <NavLink href="/docs" activeClass="active">"Docs"</NavLink>
        <NavLink href="/about" activeClass="active">"About"</NavLink>
    </nav>
}

How matching works

Exact match wins. Prefix match applies when the current path starts with href followed by a slash — so /docs is active on /docs/getting_started.

Client navigation

NavLink sets data-r-nav. When JavaScript is enabled, clicks fetch the next page's SSR HTML, swap #resuma-root + the resumability payload, and update the URL with history.pushState — no full document reload.

Modifier clicks (Ctrl/Cmd, middle button) and target=\"_blank\" fall back to normal browser navigation.

In layouts

#[layout("/docs")]
fn DocsLayout() -> View {
    view! {
        <aside>
            <NavLink href="/docs/getting_started" activeClass="active">
                "Getting Started"
            </NavLink>
        </aside>
        <main><Slot /></main>
    }
}