Benchmark Overview
This benchmark evaluates architectural strategies for maintaining synchronized UI navigation state
(sidebar, breadcrumbs, tabs, subtabs, and step indicators) during HTMX partial updates.
It compares traditional full-page rendering against manual out-of-band (OOB) swapping and automated
django-htmx-nav strategies.
For code patterns and detailed framework design, refer to the official documentation .
Implementation Approaches
8 Families EvaluatedHTMX-Nav-Decl).
+HS = hx-select enabled
+M = idiomorph morphing enabled
Pure MPA
Standard Multi-Page Application performing full page reloads on every navigation.
Pure MPA
Vanilla HTMX unaware views
HTMX-unaware views with templates wrapped in hx-boost, returning full HTML shells on partial requests.
Vanilla
Vanilla HTMX Composite OOB
Manual out-of-band (OOB) swaps in Python views for coarse navigation components (sidebar and breadcrumbs).
Vanilla-Comp
Vanilla HTMX Atomic OOB
Manual out-of-band (OOB) swaps for all navigation components, requiring conditional template rendering.
Vanilla-Atom
HTMX Nav Baseline
Basic django-htmx-nav implementation using render_shell with static OOB swaps and default partials.
HTMX-Nav-Base
HTMX Nav Composite
Uses render_nav to dynamically attach OOB swaps for sidebar and breadcrumbs.
HTMX-Nav-Comp
HTMX Nav Atomic
Uses render_nav to target all individual navigation components for precise OOB updates.
HTMX-Nav-Atom
HTMX Nav Declarative
Declarative navigation registry system that automatically handles render_shell, keeping views thin.
HTMX-Nav-Decl
Benchmark Highlights
Hand-picked findings from a pinned reference benchmark run.