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

By default, prefix match applies when the current path starts with href followed by a slash — /docs is active on /docs/getting_started.

For sidebars and tabs, use exact so only the precise path matches — <NavLink href="/docs" exact activeClass="active"> is active only on /docs, not child routes.

If href has no query string, the link stays active when the URL adds query params — /reservar stays active on /reservar?fecha=…. Links built with query_nav_link require an exact query match.

Query in the URL

query_nav_link(
    "/servicios",
    &[("destacado", "1")],
    "active",
    "pill",
    vec![/* link label */],
)

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.

Programmatic navigation: await __resuma.navigate(href) and __resuma.buildUrl(path, { key: value }) — see Query params.

In layouts

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