LLM‑Powered Static Site Navigation with CSS View Transitions
Use multi‑page navigation with CSS view transitions instead of heavy JavaScript for menu interactions.
Implement menu navigation using links and CSS transitions in your site.
Summary
The author proposes a navigation pattern that avoids in‑page JavaScript interactions by using multi‑page links enhanced with CSS view transitions. The menu is accessed via a simple <a href="/menu/"> link, and the menu page contains a link that triggers history.back() when the page was reached via navigation, preventing a new history entry. The implementation uses document.referrer to determine whether the user arrived from a normal navigation or a direct visit, and falls back to a standard link if history.back() would be inappropriate. The CSS view transition provides a smooth visual effect on modern browsers while maintaining full functionality for older browsers or when JavaScript is disabled.
This approach keeps page size small, reduces JavaScript complexity, and improves accessibility by relying on the browser’s native navigation model. The author demonstrates the technique with a video and explains that the solution is simple yet effective for menus, forms, and other UI elements that traditionally rely on heavy JavaScript. By treating the browser as a document navigator rather than a runtime, the pattern simplifies state management and enhances performance. The author encourages developers to adopt this pattern for sites that prioritize speed, reliability, and progressive enhancement.
Key changes
- Navigate to the menu via a simple <a href="/menu/"> link.
- Menu page uses a link that triggers history.back() to avoid adding a new history entry.
- Use document.referrer to detect navigation origin and fall back to a standard link if needed.
- Apply CSS view transitions for a smooth visual effect on modern browsers.
- Provide a fallback for older browsers or when JavaScript is disabled.
- Keep page size small by avoiding heavy JavaScript.
- Simplify state management by relying on native browser navigation.
- Enhance performance and accessibility with progressive enhancement.