Swap.Htmx

Navigation Patterns

Managing navigation and history in a SPA-like experience.

Use hx-boost="true" to convert standard links into AJAX requests.

<a href="/products" hx-boost="true" hx-target="#main-content">Products</a>

Dashboard Layouts

For dashboards, you often want to swap only the main content area while keeping the sidebar static.

<nav>
    <a hx-get="@Url.Action("Dashboard")" hx-target="#content">Dashboard</a>
    <a hx-get="@Url.Action("Settings")" hx-target="#content">Settings</a>
</nav>

<main id="content">
    <!-- Dynamic Content -->
</main>