skills.rest
marcushellberg
marcushellbergCOMMUNITY
Explore all skills by this author →
GitHub

views-and-navigation

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

6|1|Updated Feb 24, 2026
Search Tags:#routing#parameters#navigation#views#vaadin
One-click install
npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill views-and-navigation-marcushellberg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: views-and-navigation
Source: https://github.com/marcushellberg/vaadin-development-plugin/tree/main/skills/views-and-navigation
Command: npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill views-and-navigation-marcushellberg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vaadin 25 view design and navigation can be complex; this guide helps engineers quickly implement routes, layouts, and menus using Vaadin annotations and router patterns.

Core Features & Use Cases

  • Defines routes with @Route and page titles, builds automatic layouts with @Layout and @ParentLayout, and assembles navigation menus via @Menu and SideNav components.
  • Supports nested and master-detail layouts through router layouts (AppLayout, Layouts, RouterLayout) and data passing via route parameters, query parameters, and route templates.
  • Facilitates navigation between views with RouterLink and programmatic UI.navigate(), and demonstrates best practices for reusable navigation patterns and dynamic side navigation.

Quick Start

Create a new Vaadin 25 view by annotating a Java class with @Route, implement routing layouts, and wire it into a shared AppLayout-driven navigation as shown.

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 layouts in a Vaadin 25 Java application?▼

To create routes and layouts in Vaadin 25, annotate Java classes with @Route and use @Layout with @ParentLayout to build automatic, nested layout structures for your views.

How do I build a navigation menu using Vaadin 25 routing?▼

Build navigation menus in Vaadin 25 by utilizing the @Menu annotation alongside SideNav components to assemble dynamic, reusable side navigation within your AppLayout.

How does parameter-driven navigation work in Vaadin 25 views?▼

Parameter-driven navigation in Vaadin 25 works by passing data through route parameters, query parameters, and route templates to manage master-detail view structures.

What is the best way to navigate between views in Vaadin 25?▼

The best way to navigate between Vaadin 25 views is using RouterLink for declarative navigation or the programmatic UI.navigate() method for dynamic view transitions.

Does this guidance support building nested router layouts for Vaadin 25?▼

Yes, this guidance supports building nested router layouts in Vaadin 25 by implementing RouterLayout interfaces and applying AppLayout patterns for robust navigation structures.

When should I use route templates versus query parameters in Vaadin navigation?▼

Use route templates in Vaadin navigation for structured, path-based data passing, and use query parameters for optional filtering or view state adjustments within your Java views.

Related Skills

Explore More Software Engineering Skills→
vaadinvaadin
11

security

Configure Spring Security integration for Vaadin 25 applications.

Official
Advanced
TorbenMerraldTorbenMerrald
1

Jmix Help Dialogs

Implement info icons that open contextual help dialogs in Jmix views.

Community
Intermediate
jal-cojal-co
35

shadcn-ui

Implement shadcn/ui components in React with Tailwind CSS and Radix UI.

Community
Intermediate
marcushellbergmarcushellberg
6

client-side-views

Build client-side Vaadin 25 views with React or Hilla.

Community
Intermediate