diff --git a/aspnetcore/blazor/fundamentals/navigation.md b/aspnetcore/blazor/fundamentals/navigation.md index 65412e463747..727db0c60643 100644 --- a/aspnetcore/blazor/fundamentals/navigation.md +++ b/aspnetcore/blazor/fundamentals/navigation.md @@ -1354,28 +1354,24 @@ For the following demonstration, a consistent, standard naming convention is use In the Razor markup of the `NavMenu` component (`NavMenu.razor`) under the default `Home` page, components are added from a collection: ```diff -
- -
+ ``` The `GetRoutableComponents` method in the `@code` block: diff --git a/aspnetcore/blazor/tutorials/movie-database-app/part-3.md b/aspnetcore/blazor/tutorials/movie-database-app/part-3.md index f23ba0ea89d8..9a45855c6cb3 100644 --- a/aspnetcore/blazor/tutorials/movie-database-app/part-3.md +++ b/aspnetcore/blazor/tutorials/movie-database-app/part-3.md @@ -72,6 +72,70 @@ The component is built in `Components/Layout/NavMenu.razor`: +:::moniker range=">= aspnetcore-11.0" + +```razor + + +
+
+ BlazorWebAppMovies +
+
+ + + + +``` + +:::moniker-end + +:::moniker range=">= aspnetcore-9.0 < aspnetcore-11.0" + +```razor +
+
+ BlazorWebAppMovies +
+
+ + + +
+ +
+``` + +:::moniker-end + +:::moniker range="< aspnetcore-9.0" + ```razor
@@ -98,6 +162,8 @@ The component is built in
``` +:::moniker-end + Notice in the `NavMenu` component's first `
` element the brand link text (`` element content). Change the brand from `BlazorWebAppMovies` to `Sci-fi Movies`: ```diff @@ -117,6 +183,46 @@ To allow users to reach the movies `Index` page, add a navigation menu entry to The final `NavMenu` component after making the preceding changes: +:::moniker range=">= aspnetcore-11.0" + +```razor + + +
+
+ Sci-fi Movies +
+
+ + + + +``` + +:::moniker-end + +:::moniker range=">= aspnetcore-9.0 < aspnetcore-11.0" + ```razor
@@ -149,6 +255,44 @@ The final `NavMenu` component after making the preceding changes:
``` +:::moniker-end + +:::moniker range="< aspnetcore-9.0" + +```razor +
+
+ Sci-fi Movies +
+
+ + + +
+ +
+``` + +:::moniker-end + Run the app to see the updated brand at the top of the sidebar navigation and a link to reach the movies page (**Movies**): ![App running in a browser showing the brand at the top of the sidebar navigation as 'Sci-fi Movies' and a 'Movie' link in the sidebar](~/blazor/tutorials/movie-database-app/part-3/_static/updated-brand-and-added-link.png)