Added in v2.1

Blazorise BreakpointObserver component

Render different content at runtime based on the current responsive breakpoint.

<BreakpointObserver> listens to the shared responsive breakpoint service and re-renders its child content whenever the current breakpoint changes. Use it when the markup or behavior needs to change at runtime, not just the CSS classes.

If you only need styling changes, prefer regular responsive utility classes. Use <BreakpointObserver> when you need to switch layouts, controls, or content based on the active breakpoint.

Examples

Conditional Content

This example shows the current breakpoint and swaps the message based on whether the screen is below the desktop breakpoint or not.

Current breakpoint Resolving...

<BreakpointObserver Context="breakpoint">
    <Card>
        <CardBody>
            <Field>
                <FieldLabel>
                    Current breakpoint
                </FieldLabel>
                <FieldBody>
                    <Badge Color="Color.Primary">@GetBreakpointLabel( breakpoint )</Badge>
                </FieldBody>
            </Field>

            @if ( breakpoint != Breakpoint.None && breakpoint.IsBelow( Breakpoint.Desktop ) )
            {
                <Alert Visible Color="Color.Info" Margin="Margin.Is3.FromTop">
                    Showing compact content for mobile and tablet screens.
                </Alert>
            }
            else if ( breakpoint != Breakpoint.None )
            {
                <Alert Visible Color="Color.Success" Margin="Margin.Is3.FromTop">
                    Showing expanded content for desktop and larger screens.
                </Alert>
            }
        </CardBody>
    </Card>
</BreakpointObserver>

@code {
    private static string GetBreakpointLabel( Breakpoint breakpoint )
    {
        return breakpoint == Breakpoint.None
            ? "Resolving..."
            : breakpoint.ToString();
    }
}

Conditional Layout

Here the same information is rendered in two different layouts. Small screens get a stacked layout, while desktop and larger screens get a split two-column layout.

Sidebar content

Main content

<BreakpointObserver Context="breakpoint">
    @if ( breakpoint != Breakpoint.None && breakpoint.IsBelow( Breakpoint.Desktop ) )
    {
        <Div Padding="Padding.Is3"
             Background="Background.Light"
             Border="Border.Is1.Secondary.Subtle">
            <Div Padding="Padding.Is3"
                 Margin="Margin.Is3.FromBottom"
                 Background="Background.Primary.Subtle"
                 Border="Border.Is1.Primary.Subtle">
                Sidebar content
            </Div>
            <Div Padding="Padding.Is3"
                 Background="Background.Info.Subtle"
                 Border="Border.Is1.Info.Subtle">
                Main content
            </Div>
        </Div>
    }
    else
    {
        <Row>
            <Column ColumnSize="ColumnSize.Is4">
                <Div Padding="Padding.Is3"
                     Background="Background.Primary.Subtle"
                     Border="Border.Is1.Primary.Subtle">
                    Sidebar content
                </Div>
            </Column>
            <Column ColumnSize="ColumnSize.Is8">
                <Div Padding="Padding.Is3"
                     Background="Background.Info.Subtle"
                     Border="Border.Is1.Info.Subtle">
                    Main content
                </Div>
            </Column>
        </Row>
    }
</BreakpointObserver>

Conditional Actions

Runtime breakpoint detection is useful when the available actions should change, not only their styling. This example shows a single primary action on smaller screens and a fuller action set on larger screens.

Actions can also change with the active breakpoint.

<BreakpointObserver Context="breakpoint">
    <Card>
        <CardBody>
            <Paragraph Margin="Margin.Is3.FromBottom">
                Actions can also change with the active breakpoint.
            </Paragraph>

            @if ( breakpoint != Breakpoint.None && breakpoint.IsBelow( Breakpoint.Desktop ) )
            {
                <Button Color="Color.Primary" Block>
                    Continue
                </Button>
            }
            else if ( breakpoint != Breakpoint.None )
            {
                <Buttons>
                    <Button Color="Color.Light">
                        Cancel
                    </Button>
                    <Button Color="Color.Secondary">
                        Save Draft
                    </Button>
                    <Button Color="Color.Primary">
                        Publish
                    </Button>
                </Buttons>
            }
        </CardBody>
    </Card>
</BreakpointObserver>

When to Use

Use <BreakpointObserver> when you want inline declarative rendering in markup. If you need to react in code-behind instead, inject IBreakpointService directly and use its Current, IsResolved, IsBelow, and IsAtLeast members.

Best Practices

Prefer CSS

Responsive CSS is the better choice when only spacing, alignment, or visibility changes. Use <BreakpointObserver> when the rendered content or component behavior must genuinely differ, and react only to meaningful layout boundaries rather than every small viewport change.

Preserve State

Keep the experience equivalent across breakpoints so essential information and actions are never removed on smaller screens. Shared mutable state should have one owner outside the breakpoint branches, preventing layout changes from discarding user input or creating conflicting values.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<BreakpointObserver />