Adding navigation

This guide builds on the second step of the Getting Started tutorial, Passing Data to child component. At this stage of development, the online shop has a product catalogue that displays a list of products and details for each product.

This step of the tutorial guides you though add navigation for the product list page in the following phases:

• Adding @page directive to set the URL for the component.
• Adding a navigation link to navigate to another page.

Adding @page to set the URL

Blazor Server uses the @page directive to set the route for a component. If a component has no @page directive it means that there is no way to access the component directly, that the component must be rendered in another component or another cshtml file for the user to access. You will need to add @page directive in the product list to navigate to the product list. Add the following code to the top of the component.

@page "/product-list"

The URL of the @page directive always starts with a forward splash (/). Start the project and navigate to https://localhost:port/product-list (replace port to your project port) to see the list of the product. You will see the following result:

Adding a navigation link

The next step is to add a link to the checkout page. You can either add an HTML <a> tag or use the built-in component of Blazor Server. We will stick with the built-in component of Blazor Server for now.

1. Add the following code to the bottom of the product list page.

<NavLink href="check-out">Check-out</NavLink>

The <NavLink> component will render an <a> tag when HTML is rendered but it has some pre-built functions. We will dig deeper into the component later.

2. Verify that the link works as intended by hover over the link.

What's next

You have configured your website so you can view the product list with a distinct URL and navigate to the checkout page from the product list.

To continue exploring Blazor Server:

• Continue to Managing Data to add a shopping cart feature and manage cart data.
• Skip ahead to Deployment to deploy your website to a local server or a cloud server.