> Markdown version of [Add a View](https://vaadin.com/docs/latest/building-apps/views/add-view). Section index: [llms.txt](https://vaadin.com/docs/latest/building-apps/llms.txt)

# Add a View

In this guide, you’ll learn how to create and name views in Java, assign multiple routes to a single view, and organize views into Java packages.

## <a id="copy-paste-into-your-project"></a>Copy-Paste into Your Project

If you want to quickly try out a view in your Vaadin application, copy-paste the following code into a new Java class named `HelloWorldView` in your project’s main package:

`HelloWorldView.java`

```java
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("building-apps/add-view/hello")
public class HelloWorldView extends VerticalLayout {

    HelloWorldView() {
        add("Hello, World!");
    }
}
```

For more detailed instructions on how to add a view, continue reading below.

## <a id="what-is-a-view"></a>What Is a View?

In a Vaadin application, a *view* is a user interface component that forms a logical whole of the user interface. A page can contain other components than a view, but only one view at a time. Typically, the view takes up most of the page.

### <a id="views-or-routes"></a>Views or Routes?

Each view is associated with its own URL path. When the user navigates from one view to another, the URL of the page changes. **The mapping between a URL path and a view is called a *route***, where the **view is the *target* of the route**.

All routes must be unique to allow the routing logic to determine the view to render without any disambiguation. When conflicts are detected, the application fails to start and logs a message explaining the reason for the conflict.

The main view of an application is mapped to the root path (`""`). It is sometimes also called the *root* view.

[Image: Example of a main view]

Screenshot of a main or root view

[Image: Example of a customers view]

Screenshot of a view mapped to the "customers" path

## <a id="creating-views"></a>Creating Views

Vaadin views are Java classes that are annotated with `@Route` and extend `com.vaadin.flow.component.Component` — or any of its subclasses. The default parameter of the `@Route` annotation is the path of the view.

For example, you can define the `HelloWorld` component as the main view like this:

```java
// tag::snippet[]
@Route("")
// end::snippet[]
public class HelloWorld extends Div {
    public HelloWorld() {
        setText("Hello world");
    }
}
```

If the application is running from the root context, users would be able to access this view by navigating to `https://example.com`.

Likewise, you can define the `CustomerListView` component as the target for the `customer/list` route:

```java
// tag::snippet[]
@Route("customer/list")
// end::snippet[]
public class CustomerListView extends Main {
    public CustomerListView() {
        //...
    }
}
```

Users would be able to access this view by navigating to `https://example.com/customer/list`.

> **Note:** Don’t include a leading `/` when you specify the path of a view.

Navigation between views is covered in more detail in the [Navigate to a View](https://vaadin.com/docs/latest/building-apps/views/navigate.md) guide.

> **Tip: Which Package to Put Views In?**
>
> For information about package structures for Vaadin applications, see the [Package Structure](https://vaadin.com/docs/latest/building-apps/architecture/packages.md) architecture deep-dive.

## <a id="view-naming"></a>View Naming

If you do not specify a default parameter for `@Route`, the path is derived from the name of the view. The derived name is the class name in lower case, with the `View` suffix removed if there is one. Also, `MainView` and `Main` are mapped to root.

For example:

- `MyEditor` becomes `"myeditor"`

- `PersonView` becomes `"person"`

- `MainView` becomes `""`

If you specify the path explicitly, you can name your views any way you like.

## <a id="route-aliases"></a>Route Aliases

You can create multiple routes that target the same view. You do this with the `@RouteAlias` annotation.

For example, you can map `https://example.com`, `https://example.com/home`, and `https://example.com/main` to `HomeView` like this:

```java
@Route("")
// tag::snippet[]
@RouteAlias("home")
@RouteAlias("main")
// end::snippet[]
public class HomeView extends Div {
    public HomeView() {
        //...
    }
}
```

Whenever you use route aliases, you have to create a primary route by using the `@Route` annotation. Only adding `@RouteAlias` to a view does not work.

## <a id="page-title"></a>Page Title

By default, Vaadin views do not set a page title. You can define the page title either declaratively or dynamically.

### <a id="declarative-page-title"></a>Declarative Page Title

To set a page title declaratively, use the `@PageTitle` annotation:

```java
@Route("")
// tag::snippet[]
@PageTitle("Home Page")
// end::snippet[]
public class HomeView extends Div {
    public HomeView() {
        //...
    }
}
```

### <a id="dynamic-page-title"></a>Dynamic Page Title

To set the page title dynamically, implement the `HasDynamicTitle` interface:

```java
@Route("")
// tag::snippet[]
public class HomeView extends Div implements HasDynamicTitle {
// end::snippet[]

    public HomeView() {
        //...
    }

// tag::snippet[]
    @Override
    public String getPageTitle() {
        return "Home Page";
    }
// end::snippet[]
}
```

The title is determined when the router navigates to the view. Any changes made after navigation will not affect the title.

> **Important:** A view cannot use both the `@PageTitle` annotation and implement the `HasDynamicTitle` interface simultaneously.

## <a id="navigation-menu-item"></a>Navigation Menu Item

Most business applications include a navigation menu. This menu can be generated dynamically using Vaadin’s `MenuConfiguration`. To make a view appear in the menu, add the `@Menu` annotation:

```java
@Route()
// tag::snippet[]
@Menu(title = "Dashboard", order = 1, icon = "vaadin:dashboard")
// end::snippet[]
public class DashboardView extends Main {
    public DashboardView() {
        //...
    }
}
```

The `@Menu` annotation has the following attributes:

- `title`

  The menu title. Defaults to the page title if not specified.

- `order`

  Determines the menu item’s position. Items with a defined order appear above unordered items.

- `icon`

  Specifies the menu icon. This is a string, allowing flexibility in interpretation. It could be an [Icon](https://vaadin.com/docs/latest/components/icons.md) name or an SVG source, depending on the menu implementation.

For more information on building a navigation menu, see [Add a Navigation Menu](https://vaadin.com/docs/latest/building-apps/views/add-navi-menu.md).