skills.rest
vaadin
vaadinOFFICIAL
Explore all skills by this author →
Website𝕏@vaadinGitHub

views-and-navigation

Create and manage Vaadin 25 Java/Flow views and navigation structures.

11|3|Updated Feb 26, 2026
Search Tags:#routing#navigation#java#route-parameters#master-detail#vaadin#app-layout
One-click install
npx skills add https://github.com/vaadin/claude-plugin --skill views-and-navigation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: views-and-navigation
Source: https://github.com/vaadin/claude-plugin/tree/main/skills/views-and-navigation
Command: npx skills add https://github.com/vaadin/claude-plugin --skill views-and-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Simplifies creating and maintaining Vaadin 25 Java/Flow views, routes, and navigation shells so developers avoid duplicated layout code, brittle routing, and inconsistent navigation behavior across the app.

Core Features & Use Cases

  • Route and view creation: Guidance for @Route, @RouteAlias, @PageTitle, and deriving paths from view names.
  • Layout and app shell composition: Best practices for AppLayout, @Layout, RouterLayout, nested layouts, @ParentLayout, and @RoutePrefix to build consistent headers, drawers, and SideNavs.
  • Navigation patterns: Use RouterLink for accessibility, UI.navigate for programmatic flows, the "Your Own API" pattern for centralized navigation, and MenuConfiguration/@Menu for dynamic menus.
  • Parameter handling and patterns: Advice for HasUrlParameter, route templates with regex, optional and wildcard parameters, query parameter handling, and master-detail scaffolds with SplitLayout.
  • Use case: Build a MainLayout with a drawer SideNav that highlights nested routes, implement a CustomerDetailView that loads by route parameter, and support list filtering via query parameters.

Quick Start

Generate a Vaadin 25 Java CustomersView at route customers and a CustomerDetailView at route customer/:customerId, implement BeforeEnterObserver for parameter loading, and add a MainLayout using AppLayout with a SideNav populated from @Menu annotations.

Frequently Asked Questions about views-and-navigation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create routes and nested layouts in a Vaadin Java application?▼

Build a Vaadin AppLayout shell with SideNav by extending the AppLayout class, adding a SideNav component to the drawer, and populating menu items dynamically using @Menu annotations or MenuConfiguration for active route highlighting.

How do I handle route and query parameters in Vaadin Flow views?▼

Handle route parameters in Vaadin Flow by implementing HasUrlParameter, and parse query parameters within BeforeEnterObserver to support list filtering, while route templates with regex constraints manage optional and wildcard parameter matching.

What's the best way to navigate programmatically versus using links in Vaadin?▼

Use RouterLink for accessible, declarative navigation in Vaadin, and apply UI.navigate for programmatic flows, or implement the centralized navigation API pattern to encapsulate routing logic and ensure consistent redirect behavior across the web application.

How do I build a master-detail view with dynamic page titles in Vaadin 25?▼

Build a master-detail view in Vaadin 25 by scaffolding a SplitLayout with a list view and a detail view, loading entities via route parameters in BeforeEnterObserver, and setting dynamic page titles using @PageTitle for accurate browser history.

Does Vaadin support route templates with constraints for complex URL patterns?▼

Vaadin supports route templates with regex constraints, allowing you to define optional and wildcard parameters for complex URL matching, ensuring strict validation and parsing of path segments within your Java Flow navigation structures.

Related Skills

Explore More Software Engineering Skills→
vaadinvaadin
11

security

Configure Spring Security integration for Vaadin 25 applications.

Official
Advanced
nayukatanayukata

manage-swr-data

Create SWR hooks for fetching and mutating server state with typed keys.

Community
Advanced
danghungtb26danghungtb26
3

frontend-design-patterns

Decompose UI screens into reusable components with atomic design and API cores.

Community
Basic
marcushellbergmarcushellberg
6

views-and-navigation

Build Vaadin 25 view and navigation structures for Java/Flow projects.

Community
Advanced