--- title: ASP.NET Core Blazor sections author: guardrex description: Learn how to control the content in a Razor component from a child Razor component. monikerRange: '>= aspnetcore-8.0' ms.author: riande ms.custom: mvc ms.date: 11/12/2024 uid: blazor/components/sections --- # ASP.NET Core Blazor sections [!INCLUDE[](~/includes/not-latest-version-without-not-supported-content.md)] This article explains how to control the content in a Razor component from a child Razor component. ## Blazor sections To control the content in a Razor component from a child Razor component, Blazor supports *sections* using the following built-in components: * : Renders content provided by components with matching or arguments. Two or more components can't have the same or . * : Provides content as a to components with a matching or . If several components have the same or , the matching component renders the content of the last rendered . Sections can be used in both [layouts](xref:blazor/components/layouts) and across nested parent-child components. Although the argument passed to can use any type of casing, the documentation adopts kebab casing (for example, `top-bar`), which is a common casing choice for HTML element IDs. receives a static `object` field, and we always recommend Pascal casing for C# field names (for example, `TopbarSection`). In the following example, the app's main layout component implements an increment counter button for the app's `Counter` component. If the namespace for sections isn't in the `_Imports.razor` file, add it: ```razor @using Microsoft.AspNetCore.Components.Sections ``` In the `MainLayout` component (`MainLayout.razor`), place a component and pass a string to the parameter to indicate the section's name. The following example uses the section name `top-bar`: ```razor ``` In the `Counter` component (`Counter.razor`), create a component and pass the matching string (`top-bar`) to its parameter: ```razor ``` When the `Counter` component is accessed at `/counter`, the `MainLayout` component renders the increment count button from the `Counter` component where the component is placed. When any other component is accessed, the increment count button isn't rendered. Instead of using a named section, you can pass a static `object` with the parameter to identify the section. The following example also implements an increment counter button for the app's `Counter` component in the app's main layout. If you don't want other components to accidentally match the name of a , pass an object parameter to identify the section. This can be useful when designing a [Razor class library (RCL)](xref:blazor/components/class-libraries). When a in the RCL uses an object reference with and the consumer places a component with a matching object, an accidental match by name isn't possible when consumers of the RCL implement other components. The following example also implements an increment counter button for the app's `Counter` component in the app's main layout, using an object reference instead of a section name. Add a `TopbarSection` static `object` to the `MainLayout` component in an `@code` block: ```razor @code { internal static object TopbarSection = new(); } ``` In the `MainLayout` component's Razor markup, place a component and pass `TopbarSection` to the parameter to indicate the section: ```razor ``` Add a component to the app's `Counter` component that renders an increment count button. Use the `MainLayout` component's `TopbarSection` section static `object` as the (`MainLayout.TopbarSection`). In `Counter.razor`: ```razor ``` When the `Counter` component is accessed, the `MainLayout` component renders the increment count button where the component is placed. > [!NOTE] > and components can only set either or , not both. ## Section interaction with other Blazor features A section interacts with other Blazor features in the following ways: * [Cascading values](xref:blazor/components/cascading-values-and-parameters) flow into section content from where the content is defined by the component. * Unhandled exceptions are handled by [error boundaries](xref:blazor/fundamentals/handle-errors#error-boundaries) defined around a component. * A Razor component configured for [streaming rendering](xref:blazor/components/rendering#streaming-rendering) also configures section content provided by a component to use streaming rendering.