Navigation & Metadata

Dynamic page titles, meta tags, scroll-into-view, and navigation transitions.

Interactions Flash Reactive Navigation Connection

Sections

How It Works

Click a section above and check your browser tab — the document title updates dynamically via self.page_title.

Open DevTools and inspect the <meta> tags — they update too via self.page_meta.

Page Loading Bar

dj-scroll-into-view

NProgress-style loading indicator during navigation

djust 0.4.0 adds an automatic loading bar that appears during dj-navigate transitions. The bar shows at the top of the page whenever the browser navigates between LiveView pages. No configuration needed — it works out of the box.

Navigation Transitions

.djust-navigating

During dj-navigate transitions, the .djust-navigating CSS class is applied to [dj-root]. This page dims the content area during transitions using pure CSS:

css

.djust-navigating .nav-content {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

Code Reference

views.pypython

@event_handler()
def navigate_section(self, section: str = "intro", **kwargs):
    self.active_section = section
    # Update browser tab title (property setter)
    self.page_title = f"{section_data['title']} — My App"
    # Update meta tags (including og: and twitter:)
    self.page_meta = {
        "description": section_data["description"],
        "og:title": section_data["title"],
    }