← Back to Examples

SPA Navigation

Client-side navigation with view transitions

Navigation Demo

This example shows how html★ enables SPA-style navigation while maintaining browser history, deep linking, and accessibility. Click the nav links to see smooth view transitions between pages.

html★ Features Used

  • data-target="#main" — Update only the main content area
  • data-push — Push new entries to browser history
  • data-transitions — Enable View Transitions API for smooth animations

How It Works

Navigation links cascade attributes from a parent container. When clicked, html★ fetches the new page content and swaps it into the target element, optionally using the View Transitions API for smooth animations.

Key Concepts

  • Attribute Cascade — Set data-target on a container; all links inherit it
  • History Management — data-push updates the URL and enables back/forward
  • View Transitions — Native browser API for smooth page transitions
  • Progressive Enhancement — Links work normally without JavaScript