SwapNav Tag Helper

The Problem

Writing raw HTMX navigation links is repetitive and error-prone. You find yourself repeating hx-target="#main-content" and hx-push-url="true" dozens of times.

<!-- ❌ Repetitive Raw HTMX -->
<a href="/products" hx-get="/products" hx-target="#main" hx-push-url="true">Products</a>
<a href="/orders" hx-get="/orders" hx-target="#main" hx-push-url="true">Orders</a>

The Solution: <swap-nav>

The <swap-nav> tag helper encapsulates your application's navigation policy.

<!-- ✅ Clean Swap.Htmx -->
<swap-nav to="/products">Products</swap-nav>
<swap-nav to="/orders">Orders</swap-nav>

It renders the exact same HTML as above, but centrally managed.

---

Configuration

You configure the default behavior in Program.cs:

builder.Services.AddSwapHtmx(options => 
{
    // Define where all main navigation links should load content
    options.DefaultNavigationTarget = "#main-content";
    
    // Automatically turn off Layout when returning partials
    options.AutoSuppressLayout = true;
});

Styling

swap-nav renders as a standard <a> tag, so it respects all your CSS classes.

<swap-nav to="/admin" class="btn btn-primary">Admin</swap-nav>

Active State

In your Views, you can check the current route to apply active classes. swap-nav doesn't do this automatically (yet) to allow for complete flexibility.

<swap-nav to="/home" class="@(ViewContext.RouteData.Values["action"] == "Index" ? "active" : "")">
   Home
</swap-nav>