Docs

Documentation versions (currently viewingVaadin 25)
Documentation translations (currently viewingEnglish)

Views & Navigation

Learn how to build views and navigate between them in your application.

A view is the part of the user interface that changes when the user navigates in the application. Typically, it takes up most of the page. These guides show how to add views to your application, navigate between them, and pass data from one view to another.

Start with Add a View and Navigate to a View. Most applications also need a router layout that all views share, with a navigation menu. Pass Data to a View covers route parameters, query parameters, and other ways of passing data. Add a Master-Detail View shows a common pattern for views that list items and show the details of the selected one.

To control which users can open which views, see Protect Views. To ask users before they leave a form with unsaved changes, see Protect Unsaved Changes. To add client-side views written in React, see React Views.

Topics

Add a View
Learn how to add a view to your application.
Navigate to a View
Learn how to navigate between the views of your application.
Pass Data to a View
Learn how to pass data between the views of your application.
Add a Router Layout
Learn how to add a router layout to your application.
Add a Navigation Menu
Learn how to add a navigation menu to a router layout.
Add a Master-Detail View
Learn how to build a master-detail view.