diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md index 6d91761398..8b584f8684 100644 --- a/aspnetcore/blazor/fundamentals/routing.md +++ b/aspnetcore/blazor/fundamentals/routing.md @@ -337,7 +337,7 @@ The following `ParseQueryString` component example parses a query string paramet ::: moniker-end -## `NavLink` component +## `NavLink` and `NavMenu` components Use a component in place of HTML hyperlink elements (``) when creating navigation links. A component behaves like an `` element, except it toggles an `active` CSS class based on whether its `href` matches the current URL. The `active` class helps a user understand which page is the active page among the navigation links displayed. Optionally, assign a CSS class name to to apply a custom CSS class to the rendered link when the current route matches the `href`. diff --git a/aspnetcore/blazor/project-structure.md b/aspnetcore/blazor/project-structure.md index 306b416efe..78abd2dffc 100644 --- a/aspnetcore/blazor/project-structure.md +++ b/aspnetcore/blazor/project-structure.md @@ -31,7 +31,7 @@ The Blazor WebAssembly template (`blazorwasm`) creates the initial files and dir * `Shared` folder: Contains the following shared components and stylesheets: * `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/layouts). * `MainLayout.razor.css`: Stylesheet for the app's main layout. - * `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-component) (), which renders navigation links to other Razor components. The component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed. + * `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-and-navmenu-components) (), which renders navigation links to other Razor components. The component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed. * `NavMenu.razor.css`: Stylesheet for the app's navigation menu. * `SurveyPrompt` component (`SurveyPrompt.razor`): Blazor survey component. @@ -41,7 +41,7 @@ The Blazor WebAssembly template (`blazorwasm`) creates the initial files and dir * `Shared` folder: Contains the following shared components: * `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/layouts). - * `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-component) (), which renders navigation links to other Razor components. The component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed. + * `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-and-navmenu-components) (), which renders navigation links to other Razor components. The component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed. * `SurveyPrompt` component (`SurveyPrompt.razor`): Blazor survey component. ::: moniker-end @@ -106,7 +106,7 @@ The Blazor Server template (`blazorserver`) creates the initial files and direct * `Shared` folder: Contains the following shared components and stylesheets: * `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/layouts). * `MainLayout.razor.css`: Stylesheet for the app's main layout. - * `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-component) (), which renders navigation links to other Razor components. The component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed. + * `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-and-navmenu-components) (), which renders navigation links to other Razor components. The component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed. * `NavMenu.razor.css`: Stylesheet for the app's navigation menu. * `SurveyPrompt` component (`SurveyPrompt.razor`): Blazor survey component. @@ -116,7 +116,7 @@ The Blazor Server template (`blazorserver`) creates the initial files and direct * `Shared` folder: Contains the following shared components: * `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/layouts). - * `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-component) (), which renders navigation links to other Razor components. The component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed. + * `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-and-navmenu-components) (), which renders navigation links to other Razor components. The component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed. * `SurveyPrompt` component (`SurveyPrompt.razor`): Blazor survey component. ::: moniker-end diff --git a/aspnetcore/blazor/security/index.md b/aspnetcore/blazor/security/index.md index c2c28632d1..980f0b589a 100644 --- a/aspnetcore/blazor/security/index.md +++ b/aspnetcore/blazor/security/index.md @@ -282,7 +282,7 @@ If authorization conditions aren't specified, component can be used in the `NavMenu` component (`Shared/NavMenu.razor`) to display a list item (`
  • ...
    • `) for a [`NavLink` component](xref:blazor/fundamentals/routing#navlink-component) (), but note that this approach only removes the list item from the rendered output. It doesn't prevent the user from navigating to the component. +The component can be used in the `NavMenu` component (`Shared/NavMenu.razor`) to display a list item (`
  • ...
    • `) for a [`NavLink` component](xref:blazor/fundamentals/routing#navlink-and-navmenu-components) (), but note that this approach only removes the list item from the rendered output. It doesn't prevent the user from navigating to the component. ### Role-based and policy-based authorization diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml index 143c94b6fe..3cd9704e5a 100644 --- a/aspnetcore/toc.yml +++ b/aspnetcore/toc.yml @@ -461,9 +461,9 @@ - name: MainLayout href: blazor/layouts.md#mainlayout-component - name: NavLink - href: blazor/fundamentals/routing.md#navlink-component + href: blazor/fundamentals/routing.md#navlink-and-navmenu-components - name: NavMenu - href: blazor/fundamentals/routing.md#navlink-component + href: blazor/fundamentals/routing.md#navlink-and-navmenu-components - name: Router href: blazor/fundamentals/routing.md#route-templates - name: Virtualize