> Markdown version of [Views & Navigation](https://vaadin.com/docs/next/building-apps/views). Section index: [llms.txt](https://vaadin.com/docs/next/building-apps/llms.txt)

# Views & Navigation

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](https://vaadin.com/docs/next/building-apps/views/add-view.md) and [Navigate to a View](https://vaadin.com/docs/next/building-apps/views/navigate.md). Most applications also need a [router layout](https://vaadin.com/docs/next/building-apps/views/add-router-layout.md) that all views share, with a [navigation menu](https://vaadin.com/docs/next/building-apps/views/add-navi-menu.md). [Pass Data to a View](https://vaadin.com/docs/next/building-apps/views/pass-data.md) covers route parameters, query parameters, and other ways of passing data. [Add a Master-Detail View](https://vaadin.com/docs/next/building-apps/views/add-master-detail.md) 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](https://vaadin.com/docs/next/building-apps/security/protect-views.md). To add client-side views written in React, see [React Views](https://vaadin.com/docs/next/building-apps/react.md).

## <a id="topics"></a>Topics

- [Add a View](https://vaadin.com/docs/next/building-apps/views/add-view.md): Learn how to add a view to a Vaadin application.
- [Navigate to a View](https://vaadin.com/docs/next/building-apps/views/navigate.md): Learn how to navigate between the views of a Vaadin application.
- [Pass Data to a View](https://vaadin.com/docs/next/building-apps/views/pass-data.md): Learn how to pass data between the views of a Vaadin application.
- [Add a Router Layout](https://vaadin.com/docs/next/building-apps/views/add-router-layout.md): Learn how to add a router layout to a Vaadin application.
- [Add a Navigation Menu](https://vaadin.com/docs/next/building-apps/views/add-navi-menu.md): Learn how to add a navigation menu to a router layout.
- [Add a Master-Detail View](https://vaadin.com/docs/next/building-apps/views/add-master-detail.md): Learn how to build a master-detail view.