Blazorise Resizer component

Add an accessible resizer to an existing panel, sidebar, or other resizable element.

The <Resizer> component is a lightweight separator that resizes an element without creating or managing a pane layout. Place it inside the element you want to resize, or use TargetId when the resized element is elsewhere in the document.

A vertical resizer changes width and defaults to the end edge. A horizontal resizer changes height and defaults to the bottom edge. Set Placement when the resizer belongs on the opposite edge.

The resize hit area is visually transparent by default, so it does not change the attached element's appearance. Keyboard focus is shown by a thin line inside that existing hit area without affecting layout. Enable ShowGutter to render the current provider's separator surface, borders, and grip.

Examples

Side panel

Place the resizer inside a relatively positioned element to resize its width. Use @bind-Value when the application also needs the committed value.
Explorer
Components
App.razor
Program.cs
Editor

Drag the boundary between the explorer and editor. Click it or reach it with Tab, then use the arrow keys. 

<Div Flex="Flex.Row"
     Height="Height.Px( 260 )"
     Border="Border.Is1.Rounded"
     Overflow="Overflow.Hidden">
    <Div Position="Position.Relative"
         Flex="Flex.Shrink.Is0"
         Width="@Width.Px( panelWidth )"
        Background="Background.Light"
         Padding="Padding.Is4">
        <Div Flex="Flex.Column" Gap="Gap.Is3">
            <Heading Size="HeadingSize.Is5" Margin="Margin.Is0">Explorer</Heading>
            <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
                <Icon Name="IconName.FolderOpen" />
                <Span>Components</Span>
            </Div>
            <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
                <Icon Name="IconName.File" />
                <Span>App.razor</Span>
            </Div>
            <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
                <Icon Name="IconName.File" />
                <Span>Program.cs</Span>
            </Div>
        </Div>

        <Resizer Orientation="Orientation.Vertical"
                 Placement="Placement.End"
                 Min="160"
                 Max="360"
                 KeyboardStep="10"
                 @bind-Value="panelWidth"
                 AriaLabel="Resize explorer panel" />
    </Div>

    <Div Flex="Flex.Grow.Is1"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Editor</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            Drag the boundary between the explorer and editor. Click it or reach it with Tab, then use the arrow keys.
        </Paragraph>
    </Div>
</Div>

@code {
    private double panelWidth = 220;
}

Provider-styled gutter

Enable ShowGutter to opt into a visible separator. This example also uses a horizontal resizer, where dragging downward increases the panel height.
Preview

Resize this area vertically.

Output

The remaining space stays available to the lower region. 

<Div Flex="Flex.Column"
     Height="Height.Px( 360 )"
     Border="Border.Is1.Rounded"
     Overflow="Overflow.Hidden">
    <Div Position="Position.Relative"
         Flex="Flex.Shrink.Is0"
         Height="@Height.Px( previewHeight )"
         Background="Background.Light"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Preview</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            Resize this area vertically.
        </Paragraph>

        <Resizer Orientation="Orientation.Horizontal"
                 Placement="Placement.Bottom"
                 ShowGutter
                 Min="100"
                 Max="260"
                 @bind-Value="previewHeight"
                 AriaLabel="Resize preview height" />
    </Div>

    <Div Flex="Flex.Grow.Is1"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is6" Margin="Margin.Is0.FromBottom">Output</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            The remaining space stays available to the lower region.
        </Paragraph>
    </Div>
</Div>

@code {
    private double previewHeight = 180;
}

External target

Set TargetId to resize another element. ResizeProperty can be a CSS custom property, which is useful when one value controls an element's width and related styles.
Canvas

The resizer is positioned at this boundary but targets the inspector by ID.

Inspector

Its width is read from the custom property applied by the resizer. 

<Div Flex="Flex.Row"
     Height="Height.Px( 280 )"
     Border="Border.Is1.Rounded"
     Overflow="Overflow.Hidden">
    <Div Flex="Flex.Grow.Is1"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Canvas</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            The resizer is positioned at this boundary but targets the inspector by ID.
        </Paragraph>
    </Div>

    <Div Position="Position.Relative"
         Flex="Flex.Shrink.Is0"
         Width="Width.Px( 0 )">
        <Resizer TargetId="resizer-inspector"
                 Orientation="Orientation.Vertical"
                 Placement="Placement.Start"
                 ResizeProperty="--docs-inspector-width"
                 Min="180"
                 Max="360"
                 @bind-Value="inspectorWidth"
                 AriaLabel="Resize inspector panel" />
    </Div>

    <Div ElementId="resizer-inspector"
         Flex="Flex.Shrink.Is0"
         Style="@InspectorStyle"
         Background="Background.Light"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0">Inspector</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is3.FromTop.Is0.FromBottom">
            Its width is read from the custom property applied by the resizer.
        </Paragraph>
    </Div>
</Div>

@code {
    private double inspectorWidth = 240;

    private string InspectorStyle
        => FormattableString.Invariant(
            $"--docs-inspector-width: {inspectorWidth}px; width: var(--docs-inspector-width);" );
}

Multiple targets

Use Targets to coordinate elements on both sides of the resizer. Resizing changes the start and end targets together while preserving their combined size. In this mode, Value, Min, and Max apply to the logical start target. TargetId and the component-level ResizeProperty apply only to single-target resizing. Both coordinated targets must resolve to elements; otherwise, the resizer remains inactive.
Navigation

This is the logical start target.

Workspace

This is the logical end target. Its width decreases as the navigation panel grows. 

<Div Flex="Flex.Row"
     Height="Height.Px( 260 )"
     Border="Border.Is1.Rounded"
     Overflow="Overflow.Hidden">
    <Div ElementId="resizer-start-panel"
         Flex="Flex.Shrink.Is0"
         Style="width: 50%;"
         Background="Background.Light"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Navigation</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            This is the logical start target.
        </Paragraph>
    </Div>

    <Div Position="Position.Relative"
         Flex="Flex.Shrink.Is0"
         Width="Width.Px( 0 )">
        <Resizer Targets="@resizeTargets"
                 Orientation="Orientation.Vertical"
                 Placement="Placement.Start"
                 ShowGutter
                 KeyboardStep="10"
                 AriaLabel="Resize navigation and workspace panels" />
    </Div>

    <Div ElementId="resizer-end-panel"
         Flex="Flex.Shrink.Is0"
         Style="width: 50%;"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Workspace</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            This is the logical end target. Its width decreases as the navigation panel grows.
        </Paragraph>
    </Div>
</Div>

@code {
    private readonly ResizerTargets resizeTargets = new()
    {
        Start = new()
        {
            ElementId = "resizer-start-panel",
            ResizeProperty = "width",
            MinSize = "120px",
        },
        End = new()
        {
            ElementId = "resizer-end-panel",
            ResizeProperty = "width",
            MinSize = "160px",
        },
    };
}

Vertical bar

A vertical Bar can expose its width through a CSS variable. Bind its Visible state and disable the resizer while the Bar is collapsed into small mode.
Resizable navigation

Resize the expanded Bar, then use its toggler to enter small mode. The resizer is disabled while collapsed. 

<Layout Sider
        Height="Height.Px( 360 )"
        Border="Border.Is1.Rounded"
        Overflow="Overflow.Hidden">
    <LayoutSider>
        <LayoutSiderContent>
            <Bar Mode="BarMode.VerticalInline"
                 CollapseMode="BarCollapseMode.Small"
                 @bind-Visible="barExpanded"
                 Style="@BarStyle"
                 Background="Background.Light"
                 ThemeContrast="ThemeContrast.Light">
                <BarToggler />
                <BarMenu>
                    <BarStart>
                        <BarItem>
                            <BarLink To="#resizer-projects">
                                <BarIcon IconName="IconName.FolderOpen" />
                                Projects
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarLink To="#resizer-reports">
                                <BarIcon IconName="IconName.ChartLine" />
                                Reports
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarLink To="#resizer-settings">
                                <BarIcon IconName="IconName.Settings" />
                                Settings
                            </BarLink>
                        </BarItem>
                    </BarStart>
                </BarMenu>

                <Resizer Orientation="Orientation.Vertical"
                         Placement="Placement.End"
                         ResizeProperty="--b-vertical-bar-width"
                         Min="180"
                         Max="360"
                         @bind-Value="barWidth"
                         Disabled="@(!barExpanded)"
                         AriaLabel="Resize navigation sidebar" />
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>

    <Layout>
        <LayoutContent Padding="Padding.Is4">
            <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Resizable navigation</Heading>
            <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
                Resize the expanded Bar, then use its toggler to enter small mode. The resizer is disabled while collapsed.
            </Paragraph>
        </LayoutContent>
    </Layout>
</Layout>

@code {
    private bool barExpanded = true;

    private double barWidth = 230;

    private string BarStyle
        => FormattableString.Invariant(
            $"--b-vertical-bar-width: {barWidth}px" );
}

Positioning

The resizer is absolutely positioned, so its containing element should establish a positioning context, usually with position: relative. Make sure an ancestor does not clip the resizer when it is placed outside the resized edge.

Keyboard and accessibility

The component renders an ARIA separator and supports arrow-key resizing. Click the resizer area or reach it with the Tab key, then use the arrow keys to resize. Use KeyboardStep to control the keyboard increment and provide an AriaLabel that describes the resized region. Min and Max apply to both pointer and keyboard interaction. Set Max when the layout has a defined upper bound so assistive technologies receive the same range. aria-controls identifies the single target or the logical start target in coordinated mode.

Best Practices

Set Practical Limits

Minimum and maximum sizes should prevent resizing from hiding content or making a pane unusable. Persist a user's chosen size only when that measurement will remain meaningful across devices and viewport changes.

Make Resizing Accessible

The gutter should be visually discoverable and provide a comfortable pointer or touch target without becoming visually dominant. Support keyboard resizing and communicate the current size when the dimension is important to the task.

API

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

On this page